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

Posted by Mark Bacolcol
Mark Bacolcol
7,354 Points

Inline vs. Inline-Block

When would you use display: inline; over display: inline-block;?

2 Answers

Austin Whipple
Austin Whipple
29,847 Points
Austin Whipple
Austin Whipple
29,847 Points

The essential difference between the two is that an inline-block element respects height and width rules applied to it, while inline does not. Inline-block also uses margin and padding as you'd expect with div and other block-level elements, while inline only pushes other elements away from the sides and not anything above or below it. The best attribute of inline-block is that it behaves pretty much just like a block element but doesn't force a line-break after it.

This CSS-Tricks article goes more in depth on those.

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Mark,

The number one difference between the two is that display: inline-block; allows an element to be given top and bottom margins and padding, whereas display:inline does not.

Good luck!

Mark Bacolcol
Mark Bacolcol
7,354 Points

So there isn't really a scenario where it would be better to use "inline"?

Daniel Gauthier
Daniel Gauthier
15,000 Points

There are some scenarios where you may want to use inline just to play it safe. If you were sure you didn't want the element to take on any top or bottom margin or padding, using display: inline; would ensure that the vertical height of the element would only be as large as the content.

In most cases, either would do, but for semantic purposes, if an element is meant to be inline and doesn't need to be assigned top or bottom margin or padding or a width, its usually best to use display: inline;

Hope this clears it up a little more, good luck with the course!