CSS Tutorial

CSS Display

The display property is one of the most important in CSS because it decides how an element behaves in the flow of the page — whether it stacks vertically, sits inline with text, or vanishes entirely.

The display property

Every element has a default display value. Some elements are block-level and stack on their own lines, while others are inline and sit within a line of text. The display property lets you override this default to change how an element flows and how box properties like width and height apply.

Common display values

Value	Behaviour
block	Starts on a new line and fills the available width; width/height apply
inline	Flows within text; width/height and vertical margins are ignored
inline-block	Flows like inline but accepts width, height, and vertical padding
none	Removes the element completely; it takes up no space
flex	Makes a flexible one-dimensional layout container
grid	Makes a two-dimensional grid layout container

Block vs inline vs inline-block

The demo below shows the three most common values with coloured boxes. Notice how block boxes each take a full row, inline boxes ignore width and hug the text, and inline-block boxes sit side by side yet still respect width and height.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui, sans-serif; padding: 20px; }
  .box { padding: 10px; margin: 4px; color: white; }
  .block   { display: block;        background: #2563eb; width: 120px; }
  .inline  { display: inline;       background: #16a34a; width: 120px; }
  .inlineb { display: inline-block; background: #dc2626; width: 120px; }
</style>
</head>
<body>
  <h4>block (each on its own line)</h4>
  <span class="box block">A</span>
  <span class="box block">B</span>

  <h4>inline (width ignored, stays in line)</h4>
  <span class="box inline">A</span>
  <span class="box inline">B</span>

  <h4>inline-block (side by side, width respected)</h4>
  <span class="box inlineb">A</span>
  <span class="box inlineb">B</span>
</body>
</html>

Hiding elements with display: none

display: none removes an element as if it were never there — it leaves no gap. This differs from visibility: hidden, which hides the element but keeps its space reserved.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui, sans-serif; padding: 20px; }
  .gone   { display: none; }
  .ghost  { visibility: hidden; }
  span { background: #f59e0b; padding: 6px 10px; }
</style>
</head>
<body>
  <p>Start <span class="gone">[display:none]</span> end — no gap.</p>
  <p>Start <span class="ghost">[hidden]</span> end — gap kept.</p>
</body>
</html>

⚠️

display: none hides content from most screen readers too. To hide something visually but keep it for assistive tech, use a visually-hidden technique instead of display: none.

Key points

block elements stack vertically and accept width and height.
inline elements flow with text and ignore width, height, and vertical margins.
inline-block flows inline yet still respects width and height.
display: none removes the element and its space; visibility: hidden keeps the space.