CSS display: inline vs inline-block
CssCss Problem Overview
In CSS, display
can have values of inline
and inline-block
. Can anyone explain in detail the difference between inline
and inline-block
?
I searched everywhere, the most detailed explanation tells me inline-block
is placed as inline
, but behaves like block
. But it does not explain what exactly "behave as a block" means. Is it any special feature?
An example would be an even better answer. Thanks.
Css Solutions
Solution 1 - Css
Inline elements:
- respect left & right margins and padding, but not top & bottom
- cannot have a width and height set
- allow other elements to sit to their left and right.
- see very important side notes on this [here][1].
Block elements:
- respect all of those
- force a line break after the block element
- acquires full-width if width not defined
Inline-block elements:
- allow other elements to sit to their left and right
- respect top & bottom margins and padding
- respect height and width
From [W3Schools][2]:
> * 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.
When you visualize this, it looks like this:
![CSS block vs inline vs inline-block][3]
The image is taken from [this page][4], which also talks some more about this subject.
[1]: https://hacks.mozilla.org/2015/03/understanding-inline-box-model/ "mozzila docs" [2]: http://www.w3schools.com/cssref/pr_class_display.asp [3]: http://i.stack.imgur.com/mGTYI.png [4]: http://dustwell.com/div-span-inline-block.html