646

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.

Community
  • 1
  • 1
user926958
  • 9,355
  • 7
  • 28
  • 33
  • 37
    CSS is not a markup language, and `display` is not a tag. – BoltClock Feb 08 '12 at 08:24
  • 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 http://bit.ly/16cxMXj for an example.) – Ace Apr 29 '13 at 14:49

1 Answers1

1322

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.

Community
  • 1
  • 1
Oldskool
  • 34,211
  • 7
  • 53
  • 66
  • 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 Feb 08 '12 at 08:57
  • @user926958 It means that it `has some whitespace above and below it and does not tolerate any HTML elements next to it.`. – Oldskool Feb 08 '12 at 09:04
  • 3
    If you actually try it, it actually allow elements next to it. – user926958 Feb 08 '12 at 09: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 Feb 08 '13 at 17:26
  • 91
    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 Sep 24 '13 at 15:42
  • 63
    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 Jun 24 '14 at 15:18
  • 1
    vbullinger - thanks for that clarification. Was also confused by the "Behaves like a block element", this didn't give me any extra understanding. My current mental picture: **Block:** Takes up entire line + enforces are whitespace specified around it in all directions. **Inline-block:** Happy with whitespace above and below, but not left and right. Does not take up entire line. Content fitted on same line until reaches the end of the line, then new content goes on a new line. **Inline:** Like hell am I agreeing to whitespace. Don't start a new line, wrap content to next line if need be. – WillJones Apr 26 '15 at 16:08
  • 1
    You say Block elements "respect all of those", including "allow other elements to sit to their left and right" and "force a line break after the block element". How can you force a line break and allow an element to the right? – martin jakubik Apr 30 '15 at 07:18
  • 2
    Can anyone give me a use-case for `inline` over `inline-block`? I have created a [small codepan](https://codepen.io/AmirTugi/pen/WGZKAb) to simulate all 3 of the spoken `display` values, and I cannot think on a case where I'd rather use `inline` when `inline-block` can offer all and above. – Amir Tugi Aug 31 '16 at 09:47
  • if the only differentiating property of a block element is that it "forces a line break", what does it mean to "behave as a block element" if it is placed on the same line and does not have a forced line break? – Dave Cousineau Nov 08 '16 at 23:24
  • so TL;DR us either block or inline-block and the other one is @Deprecated – Все Едно Jun 04 '17 at 12:48
  • 3
    inline element can also set padding-top/bottom, although the effect is not what you want. Please confirm it! – tomwang1013 Aug 09 '17 at 09:40
  • 1
    But yes, inline elements are accepting padding-top & padding-bottom. @Oldskool – lakshman_dev Dec 13 '17 at 18:05
  • 3
    I made a [comparison table](https://gist.github.com/Asheq/1ef5ec77b8e89c2c9da89d2b7a1cf8cb) based off of this answer: – Niko Bellic Dec 20 '17 at 22:08
  • An img followed by a table. Apply inline, block or inline-block to the table. Interesting results: block fails if you want the table below the image. – coder.in.me Feb 20 '18 at 08:40
  • "and padding, but not top & bottom", why do my inline elements respect top and bottom padding? – Lukas Jan 27 '21 at 11:04
  • 1
    Seems like the example page is down, so I've quickly prototyped it on codepen: https://codepen.io/theiaz/pen/qBrPmdG – Theiaz May 28 '21 at 13:00