How to align the html input

HTML-CSS
1

Hi,
I’m creating a html form using inputs. When you stack these together, the boxes (where you write in the information) aren’t aligned vertically.

I was wondering if you have any tips to line them up.

<label for="fname">First Name:</label>
            <input type="text" id="fname" name="fname"><br>
            <label for="lname">Last Name:</label>
            <input type="text" id="lname" name="lname"><br>
            <label for="email">E-mail:</label>
            <input type="text" id="email" name="email"><br>
            <label for="address">Address:</label>
            <input type="text" id="address" name="address"><br>
2

Hey @Aimslee!

Input tags are inline elements. Unlike block level elements, inline elements do not begin a new line.

FCC has a great article talking about this subject of inline versus block level.

https://www.freecodecamp.org/news/inline-elements-and-block-elements-in-html-explained/#:~:text=Inline%20Element%3A&text=Inline%20elements%20occupy%20the%20space,>%20%2C%20etc.

You can fix this by using CSS. Get rid of the br tags and instead change the display for the inputs to block like this.

input {
  display:block;
}

Hope that helps!

Happy coding!

3

Wow, this works! :slight_smile:

Do you happen to know how to align them so that only the boxes are lined up? As shown below…

First Name:               [            input box             ]
Last Name:                [            input box             ]
E-mail:                   [            input box             ]
Address:                  [            input box             ]
4

You could try this

5

This is great! Thank you!!!

:smiley: