652

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
  • 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
    Commented Apr 29, 2013 at 14:49

1 Answer 1

1339

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.

17
  • 8
    I think you did not read my question completely. I mentioned in the question I know it behaves as a block element. I am asking what does "behave as a block element" means.
    – user926958
    Commented Feb 8, 2012 at 8:57
  • 3
    If you actually try it, it actually allow elements next to it.
    – user926958
    Commented Feb 8, 2012 at 9:16
  • 6
    i am new to html. block element does not tolerate any elements next to it. But if we give next element "inline", then it will come next to our block element. So, block element tolerating or not has no meaning. It's upto the next element whether it wants to come in line with previous element or not.???
    – vivek.m
    Commented Feb 8, 2013 at 17:26
  • 95
    I know it's old, but I'll help: "Behaves like a block element" is insanely poor wording. I'll try to clarify further: inline: can display things before or after it, on the same line. block: demands its own line, with whitespace around it. inline-block: can have elements before or after it, but there is whitespace around it. So inline-block is not "inline but behaves like block," it's a combination of both, as the name would imply: on the same line, but has borders. Make sense?
    – vbullinger
    Commented Sep 24, 2013 at 15:42
  • 68
    One important distinction to note is that an inline element can start on one line and wrap onto the following line, while an inline-block element will wrap as a whole.
    – herman
    Commented Jun 24, 2014 at 15:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.