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 Dennis de Vries
Dennis de Vries
9,440 Points

What's the use of inline, when there's inline-block?

Hi all,

Watching Guil's explanation of display modes 'inline' and 'inline-block' left me wondering: what's the whole point of having/using the inline option?

As I understand the main difference between inline and inline-block is the fact that with inline-block you can style the elements as if they are block-level, as with inline-level elements you can't set certain size or margin values.

Wouldn't it be better to just always use inline-block so you have the option to control them as block-level elements? Or is there something else to inline-level elements I'm not seeing here?

Thanks!

Wilson Usman
Wilson Usman
35,206 Points

I'd like to explain it further, but I believe Sara Cope at css-tricks does a better job at giving you a good visual here.

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

It has to do with flow, which is most easily seen with text. If you are working with images, or something else that has a specific size, the difference may not be clear.

Inline elements are placed in the flow to fit, and wrap around and pack vertically without reserving any extra space.

Inline-block elements have a specific reserved size that affects how other elements can fit next to them.

You might choose inline-block if you want to take more control over the flow, but you might prefer inline if you want the flow to take care of itself when other elements are added beside, inside, or around the inline element. I suspect that inline is the default mode for many elements for the reason that it is more self-adjusting.