CSS display: inline vs inline-block [duplicate]

621
votes

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.

1
css
CSS is not a markup language, and display is not a tag. - BoltClock
cek here.. display in CSS Versions - Fredy
display: inline-block will render just fine in Firefox, Safari, Google Chrome and IE 8. 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.ly/16cxMXj for an example.) - Ace

1 Answers

1283
votes

Inline elements:

  1. respect left & right margins and padding, but not top & bottom
  2. cannot have a width and height set
  3. allow other elements to sit to their left and right.
  4. see very important side notes on this here.

Block elements:

  1. respect all of those
  2. force a line break after the block element
  3. acquires full-width if width not defined

Inline-block elements:

  1. allow other elements to sit to their left and right
  2. respect top & bottom margins and padding
  3. 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:

CSS block vs inline vs inline-block

The image is taken from this page, which also talks some more about this subject.