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

HTML How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Kailash Seshadri
Kailash Seshadri
3,087 Points
Posted by Kailash Seshadri
Kailash Seshadri
3,087 Points

Difference between inline, block and inline block

What is the difference between inline, block and inline block?

2 Answers

James Copeland
James Copeland
12,550 Points
James Copeland
James Copeland
12,550 Points

Inline - elements that take up only as much space as needed and can fit around other elements on the same line. For example, link elements (a) will fit on the same line as other text and will not show up on a new line nor take more space than is needed.

block - A block element will take up the full width available to it by default, which does not allow for other elements to appear on the same line.

inline-block - Like inline elements but can also have a width and a height to separate itself from nearby elements. Can appear on the same line as other elements by default, though inherits some properties of a block (given that it can have a width and height).

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

I agree with James. I just wanted to add, if i make a menu, i would use inline-block, or some navigation of a kind. If im making a vertical menu, like for the footer, i will put this in block, so it stacks up. Inline? i dont use it often, if not at all.