DEV Community

Albert Chang
Albert Chang

Posted on

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.

Discussion (1)

Collapse
alohci profile image
Nicholas Stimpson • Edited

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.