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.

CSS

What is inline block

Hi, I am taking lesson of width, height, and overflow properties. I don't understand the inline block that he mentioned. Can someone explain?

Thank you,

1 Answer

Erik McClintock
Erik McClintock
45,783 Points

Edwin,

"Inline-block" is one of three different major, related display property values that an element can have, and determines how it is presented in the document and how you are able to manipulate it with CSS.

1) "Inline" elements are elements that you wish to remain "inline" when you place them in your HTML. For example, "inline" is applied automatically to things like links (anchor tags), because generally, you don't want to force a line break after a link, but rather, you want it to flow "inline" with other elements that came before and/or after it. Inline elements only take up as much space as they need to (for example, a link will only be as wide as its text and have a height related to line-height), cannot have properties like width or height, and will display properties like padding and margin only partially. Other examples of inline elements would be span, img, and label.

2) "Block" elements are just the opposite; they are elements that take up 100% of the width of their parent element, and thus force a line break. They can be styled with the standard box model properties (width, height, padding, margin) and they would behave as you'd expect them to. Examples of block level elements would be div, p, h1-h6, and table.

3) "Inline-block" is a mix of the two other styles. It takes the inline capabilities of "inline", meaning that it will only take up as much space as the element requires, and it does NOT force a new line, and it takes the property accepting capabilities of "block", where you can apply standard box model styling to it and they will behave as you'd expect. It basically allows you to have a totally styled block element that doesn't need to be on its own line in the document.

Hopefully this will help to clear things up a little for you. If you still need further clarification or just want to dive more into the specifics of each display type, hop on Google and do some searching! There is a wealth of information sitting out there just waiting to be read :)

Happy coding!

Erik

got it. Thank you!!