Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Kailash Seshadri
Kailash Seshadri
3,061 Points

Difference between inline, block and inline block

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

2 Answers

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

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.