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

Properties of Inline-Block Elements

I know block elements are able to receive width, height values as well as top and bottom margin/padding values.

Inline elements are restricted to merely left and right padding and margins correct?

So if an element is Inline-block, what are its limitations?

It seemed like in the video it was that Inline-block elements were essentially block elements that didn't have a page break. Though we had to make the links of the nav bar block elements in order for the top and bottom padding to take effect.

I thought that when we set the .main-nav li {display:inline-block;} that the <a> elements contained inside those <li> elements would also be inline-block?

Or am I misunderstanding this?

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points

inline block elements should allow us to have a good navigation bar but still have all the padding and margin properties availabe.

https://css-tricks.com/almanac/properties/d/display/ http://learnlayout.com/inline-block.html