CSS display: inline vs inline-block

Question

This question already has answers here:

Answer 1

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:

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