CSS Display: Block, Inline, Inline-Block, and None

The display property specifies how an element behaves in the document layout flow.

1. Display Types Comparison

display: block: Starts on a new line and takes up the full width available (e.g. <div>, <p>, <h1>). Accepts width, height, margin, and padding.

display: inline: Sits inline with surrounding text (e.g. <span>, <a>, <strong>). Does not force line breaks. Ignores vertical width and height.

display: inline-block: Sits inline on the same line as neighboring elements, but honors width, height, padding, and margin. Perfect for interactive buttons and pill tags!

display: none: Completely removes the element from the document render tree (takes up zero space).

⊞Code Example

/* Inline-block buttons sitting side-by-side */

.nav-btn {

display: inline-block;

padding: 10px 20px;

background-color: #04AA6D;

color: #ffffff;

text-decoration: none;

border-radius: 8px;

font-weight: 700;

margin-right: 12px;

}