Block vs. Inline vs. Inline-Block

Block

elements with display: block;.

• It occupies the entire horizontal space of its parent element.
• Always start on a new line.

Most elements by default belongs to this category. For a complete list please refer to MDN list of block elements

Inline

elements with display: inline;

• Does not start on a new line.
• Its width and height are determined by the content.
• Not affected by width, height, margin-top, margin-bottom properties.
• Affected by horizontal padding and margin.
• Affected by padding-top and padding-bottom, but only visually. Other elements will not respect the vertical paddings.

For a complete list of inline elements MDN list of inline elements

Inline-block

elements with display: inline-block

• An inline element that respects margin, width and height.

Comments

[Nicholas Stimpson]

inline-block = An atomic inline-level element that respects margin, width and height, and is a block container for its contents.

inline-flex = An atomic inline-level element that respects margin, width and height, and is a flex container for its contents.

inline-grid = An atomic inline-level element that respects margin, width and height, and is a grid container for its contents.