Block, Inline & Inline-block. What’s the difference?

Block, Inline, and Inline-block, these 3 display properties are used a lot and their difference is often asked during UI interviews. Most HTML Elements have either of these properties by default, particularly the block property.

Block

Setting an element as a block will force the element to take up the entire width of the parent container. The only way to manage the width of a block element is to change the width of its parent element.

It also generates line break, so even if there is more space, subsequent block elements won’t use it and get stacked on top of each other

Three paragraph elements with red background. Paragraph elements are set to block value by default, hence they cause a newline.

Some of the block elements are div, section, p, nav, etc. You can check this list for more examples.

Inline

Unlike block elements, inline elements don’t take up the entire space on the line i.e., they remain on the same line or inline and don’t create line-breaks

The height and Width property doesn’t work on these elements. They simply take up as much space as the content within them.

Three anchor tags with red background. These tags resist newlines

Some of the inline elements are a, b, button, input, etc. You can check this list for more examples.

Inline-block

These elements are in essence just the Inline elements, with a slight difference that we can set a property of height and width to them.

Anchor tags with display set to inline-block. They can have height and width, and resist the newlines as well

With this property, we also allow elements to have a padding and margin property like block elements and, also resist the new lines like inline elements.

Reference

HTML: HyperText Markup Language | MDN

Block, Inline, and Inline-Block explained | CSS Tutorial

CSS Inline vs inline-block vs Block | SamanthaMing.com