Form default set it same vertical area or How can I regulate my form?-CodePudding

<form action="[email protected]" method="get">
    <label for="fname">First Name: </label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="surname">Surname:</label>
    <input type="surname" id="surname" name="surname"><br><br>
    <label for="email">E-mail:</label>
    <input type="text" id="email" name="email"><br><br>
    <input type="submit" value="Submit">
</form>

I want to add some space between type box and surname, firstname but also I wanna appear same vertical line. I made it code that is appear weird. How can I create form different way and more professional, can you give me some basic clue, suggestion or trick? thank you for your helping. (Btw I'm beginner in html and css)

CodePudding user response：

You could use:

<form action="[email protected]" method="get">
  <p><label for="fname">First Name: </label>
  <input type="text" id="fname" name="fname"></p>
  <p><label for="surname">Surname:</label>
  <input type="surname" id="surname" name="surname"></p>
  <p><label for="email">E-mail:</label>
  <input type="text" id="email" name="email"></p>
  <input type="submit" value="Submit">
</form>
<style>
  p { padding: 0; margin: 0; margin-bottom: 4px; }
</style>

Adjusting margin-bottom to your liking.

CodePudding user response：

Still it wasnt look smooth. enter image description here