CSS CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

John Haupenthal
John Haupenthal
2,749 Points

Inline-block vs block

What is the difference between setting the display value to block instead of inline-block? Referring specifically to 3:16 in the video, chaning the nav buttons. Why wasn't inline-block used?

1 Answer

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 87,403 Points

Inline-block is there when you want to use more features on an inline element but you still want it to act like an inline element. It acts like a block element but other elements flow around it as if it were inline like an image or a span element.

For example I use inline-block when I want to style list items left to right of each other on the same like so I can use a list element for navigation.

With regard to the video, I believe what Guil is doing is setting a block level element beheavior for the list and doing it inside a media query, so they'll appear stacked on top of each other on mobile screens