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
Alita Edmonds
6,068 PointsWhat is the difference between inline and inline-block?
I am curious, what is the difference between inline and inline-block? I get very stuck sometimes when working with these two properties. Thanks!
2 Answers
Matt Brock
28,330 PointsHey Alita! Simply put:
- An inline element cannot have top/bottom margin, width, or height applied to it and stays in the flow of the document, literally "in line" with everything around it.
- An inline-block element has some of the properties of a block element, but it doesn't break the flow of the document and start a new line like a block element. It can have width and height set, though, as well as all margins.
Here's a little demo I put together: https://codepen.io/mattpbrock/pen/aVmexO.
Alita Edmonds
6,068 PointsThank you Matt! Now I understand.
Matt Brock
28,330 PointsGlad to help! :)