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 Techniques Display Modes Inline-Block Formatting

Posted by Luke Ayres
Luke Ayres
6,170 Points

Advantages of Inline over Inline Blocks

So can someone please tell me what advantage there is in using Inline rather than Inline Blocks, from the Layout Deep Dive I've got the impression they can be styled much more freely and wrap cleaner when minimized but what are the downsides?

2 Answers

Jacob Miller
Jacob Miller
12,466 Points
Jacob Miller
Jacob Miller
12,466 Points

Here's a good explanation I saw on stackoverflow.com:

Inline elements:

  • respect left & right margins and padding, but not top & bottom
  • cannot have a width and height set
  • allow other elements to sit to their left and right.

Block elements:

  • respect left, right, top & bottom margins and padding
  • force a line break after the block element
  • allow you to set height and width

Inline-block elements:

  • allow other elements to sit to their left and right
  • respect left, right, top & bottom margins and padding
  • allow you to set height and width
Jacob Miller
Jacob Miller
12,466 Points
Jacob Miller
Jacob Miller
12,466 Points

Sorry if this is hard to read... I can't seem to format it correctly.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Jacob Miller - The forum uses markdown to correctly format code, check out this thread on how to type code in the forum for some examples.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

All HTML elements are either inline or block by default, the classic example of is <a> element and a <p> element respectively.

Since an <a> is probably inside of a block level element like a <p> in most cases you wouldn't want words in the middle of a sentence to have margin/padding on the top/bottom.

That being said it's rarely useful to change something to display: inline if that's not already it's default.