what is inline-block in css?

0 votes
asked Oct 20, 2014 in CSS by kalpana (3,995 points)

  what is inline-block in css?

1 Answer

0 votes
answered Oct 20, 2014 by jonathan (3,105 points)


  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.

Block elements:

  1. respect all of those
  2. force a line break after the block element

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.

You can visually see it's difference near the bottom of this page.