CSS Display

CSS Display

The display property controls how an element is shown on the page. It affects layout behavior, how elements take space, and whether they can sit next to each other.

Display

Common display values are block, inline, inline-block, and none.

• block: starts on a new line and takes full width (example: div, p)
• inline: stays in the same line and takes only as much width as needed (example: span, a)
• inline-block: like inline, but you can set width/height and vertical padding
• none: removes the element from the layout

Block vs Inline

This example shows the difference between block and inline elements.

.block {
  display: block;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
}

.inline {
  display: inline;
  border: 1px solid #ddd;
  padding: 10px;
}

Block elements respect width and start on a new line. Inline elements flow within the text, and width/height usually do not apply the same way.

Inline-block

inline-block allows elements to sit next to each other while still supporting width, height, and padding.

.badge {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 999px;
  margin-right: 8px;
}

Display: none

When display: none is used, the element is completely removed from the page layout. It does not take up any space.

.hidden {
  display: none;
}

Visibility / Hide

The visibility property can hide an element while keeping its space in the layout.

.invisible {
  visibility: hidden;
}

• display: none removes the element and its space
• visibility: hidden hides the element but keeps its space

Code Challenge

Goal: Control layout and hiding behavior using display and visibility.

HTML:

<div class="row">
  <span class="tag">HTML</span>
  <span class="tag">CSS</span>
  <span class="tag hidden-tag">Hidden</span>
</div>

<p class="note invisible-note">This note is hidden but still takes space.</p>

Task:

• Make .tag behave like badges using inline-block
• Hide .hidden-tag using display: none
• Hide .invisible-note using visibility: hidden

Try a Solution:

.tag {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 999px;
  margin-right: 8px;
}

.hidden-tag {
  display: none;
}

.invisible-note {
  visibility: hidden;
}

What’s Next?

Next, you will learn how to control responsive widths using max-width.