Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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
Posted by 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
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 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