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
David Schriever
1,777 Pointsdisplay, inline-block vs inline
Hello, I have a question, what is the exact difference between inline-block and inline, as a value, with the property being display:?
I have read that it has something to do with inline not respecting top and bottom margin, the problem I have with that is, when I changed it, it made absolutely no difference. So what is the difference?
1 Answer
Adam Hughes
3,029 PointsOne of the key differences is that display: inline can wrap. display: inline-block is a block element so will not wrap in the same way. You would only notice it in some circumstances.
The general way I approach it though is if the element is sitting on a line as text use display: inline. If it's a containing element or a clickable element (like a button or link) use display: inline-block. (This is very generic and just a personal thought process)
The example I've posted on JSFiddle should explain a little more