HTML & CSS Interview Question #78

What is the difference between block, inline, and inline-block?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

A block box normally starts on a new line and expands in the block direction according to its containing context. An inline box participates within a line of text, and ordinary width and height behavior differs from block layout.

Detailed Explanation

A block box normally starts on a new line and expands in the block direction according to its containing context. An inline box participates within a line of text, and ordinary width and height behavior differs from block layout.

inline-block flows inline with surrounding content but creates a box on which width, height, padding, and margins can be controlled more like a block. Modern Flexbox and Grid often provide clearer solutions for component layout.

Code Example

.block { display: block; }
.inline { display: inline; }
.inline-block {
    display: inline-block;
    width: 160px;
    padding: .5rem;
}