How to align the html input

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>

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.,>%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 {

Hope that helps!

Happy coding!

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             ]

You could try this

This is great! Thank you!!!