Welcome to the Treehouse Community
Looking to learn something new?
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?
Erik McClintock45,783 Points
"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 :)