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
Edwin Chau
Courses Plus Student 5,702 PointsWhat 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
45,783 PointsEdwin,
"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
Edwin Chau
Courses Plus Student 5,702 PointsEdwin Chau
Courses Plus Student 5,702 Pointsgot it. Thank you!!