[ad_1]
Asked
Viewed
568k times
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.
asked Feb 8, 2012 at 8:24
9,1157 gold badges27 silver badges33 bronze badges
3
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.
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:
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:
The image is taken from this page, which also talks some more about this subject.
answered Feb 8, 2012 at 8:30
33.6k7 gold badges51 silver badges64 bronze badges
17
Not the answer you’re looking for? Browse other questions tagged css or ask your own question.
default
[ad_2]