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 trialLuke Ayres
6,170 PointsAdvantages 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
12,466 PointsHere'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
James Barnett
39,199 PointsAll 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.
Jacob Miller
12,466 PointsJacob Miller
12,466 PointsSorry if this is hard to read... I can't seem to format it correctly.
James Barnett
39,199 PointsJames Barnett
39,199 PointsJacob Miller - The forum uses markdown to correctly format code, check out this thread on how to type code in the forum for some examples.