CSS · Chapter 17 of 44

CSS Display

The display property determines how an element is rendered: block (own line, full width), inline (flows with text), inline-block (flows but accepts width/height), and none (hidden entirely).

Choosing the right display value is fundamental to controlling page layout.

Syntax

display: block | inline | inline-block | none;

Block vs inline

Block elements (like <div>) start on a new line and take full width. Inline elements (like <span>) flow within text and ignore width/height.

inline-block and none

inline-block flows like inline but respects width, height, and margin. display: none removes the element entirely, taking no space.

Example 1 (css)

.badge {
  display: inline-block;
  width: 80px;
  padding: 5px;
  background: gold;
}

Output

A small inline badge with a fixed width, flowing next to text

inline-block lets the badge sit inline while still respecting a set width and padding.

Key points

Block elements take the full width and start on a new line.
Inline elements flow within text and ignore width/height.
inline-block combines both behaviors.
display: none hides an element and removes its space entirely.

💡 Note: visibility: hidden hides an element but still reserves its space, unlike display: none.

CSS Display

Block vs inline

inline-block and none

Key points

📝 Quick Quiz