Why inline block

From W3Schools :. An inline element has no line break before or after it, and it tolerates HTML elements next to it. A block element has some whitespace above and below it and does not tolerate any HTML elements next to it. An inline-block element is placed as an inline element on the same line as adjacent content , but it behaves as a block element.

The image is taken from this page , which also talks some more about this subject. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams?

Collectives on Stack Overflow. Learn more. CSS display: inline vs inline-block [duplicate] Ask Question. Asked 9 years, 9 months ago. Active 1 year, 9 months ago. Viewed k times. Community Bot 1 1 1 silver badge. CSS is not a markup language, and display is not a tag. However, for older versions of Internet Explorer, we need to trigger hasLayout and also use a little hack to set the display to inline. See bit. Shadow Effects Box Shadow. Example span. Report Error. Your message has been sent to W3Schools.

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. The display property specifics the display behavior of an element. This one displays the element inline or on the same line. In other words, inline elements do NOT start on a new line and only takes up as much width as its content.

So, if you try to set any width and height, it will have NO effects. Alright, let's move on to inline-block. So far, we talked about inline. Now let's switched to the opposite of it, block. Remember inline elements appears on the same line.

Well, block starts on a NEW line and takes up the full width available. So that means block elements will occupy the entire width of its parent element. Imagine if you're attending a concert, you have rows of seats, right. If you assign your friend with an inline seat, they will sit next to you.