Why does inline-block align the input boxes with each other?

[FlorinPop]

I am currently at Responsive Web Design > Learn Accessibility by Building a Quiz > Step 57.

It`s saying that to align the input boxes with each other I must set the display property to inline-block and it does that but I don’t understand how it does that.

Like why does setting the the display property to inline-block align the input boxes with each other?

This is how it looked after I used the property before they were slightly not aligned.

[anon86258595]

The inline property sets the elements each on there own line and they take up the amount of space the element would normally take so you can have two elements on the same line but they come right after each-other:

The block property sets each element on its own line and each element takes up the space of a whole line so you cant have the label element on the same line as your input element even if you set a width or height property to your element:

So inline-block is like the inline property and it only takes up the amount of space the element needs but in addition to that, unlike the inline property you can set a width and height property to it so that the text takes up more width and the input elements are pushed to after the amount of space the label elements take which is 10% in this case.

Ex:
Here I use display:inline so the label elements only take up the amount of space that the text needs:

Here I use display:inline-block and I also use width:10% so the label elements each take the width of 10% as specified and the input elements get pushed forward:

Hope this helps!

[FlorinPop]

Ahhh so the inline-block property in addition to specifying the width makes them align, right? (not the inline-block property by itself)

[anon86258595]

yeah. they are each pushed onto a seperate line and then they are moved moved forward 10% because the label element takes up that amount of space in width.