CSS: Display & Visibility

Control how elements are rendered and whether they are visible.

display: block

Block elements take up the full width of their container and always start on a new line. Each block element is stacked vertically. Common block elements include div, p, h1–h6, and section.

`display: block`

Block elements stretch to fill their container's width by default. You can control their width, height, padding, and margin freely.

Starts on a new line, no other element sits beside it
Stretches to full container width by default
width and height: can be set explicitly
Examples: div, p, h1, ul, section, article
display: block: can turn any inline element (like a) into block

display: block

Each block element starts on its own line.

.box {
  display: block;
  background: steelblue;
  color: white;
  padding: 10px;
  margin-bottom: 8px;
}

display: inline

Inline elements flow with the surrounding text. They do not start on a new line and only take up as much width as their content. You cannot set width or height on an inline element. Common inline elements: span, a, strong, em.

`display: inline`

Inline elements sit within a line of text. Width and height have no effect. Top and bottom margins/padding behave differently than on block elements.

Flows with surrounding text, no line break
Width and height cannot be set
Top/bottom margin and padding do not push surrounding block elements
Examples: span, a, strong, em, code, img
display: inline: can turn a block element back into inline

display: inline

Inline elements flow within text without breaking to new lines.

.highlight {
  display: inline;
  background: gold;
  padding: 2px 6px;
  border-radius: 3px;
}

display: inline-block

inline-block is a hybrid, elements sit on the same line like inline elements, but you can set width, height, and full margin/padding like block elements.

`display: inline-block`

inline-block gives you the best of both worlds: elements flow horizontally and you can still set dimensions and full box-model properties.

Sits on the same line as adjacent elements
Accepts width, height, padding, and margin
Common use: navigation links, buttons, badges
inline vs inline-block: inline cannot have set dimensions; inline-block can

display: inline-block

Three block elements displayed side-by-side using inline-block.

.btn {
  display: inline-block;
  background: steelblue;
  color: white;
  padding: 8px 16px;
  margin-right: 6px;
  border-radius: 4px;
  width: 80px;
  text-align: center;
}

display: none

display: none completely removes the element from the page, it takes up no space and is invisible. The element is still in the HTML, but the browser renders as if it does not exist.

`display: none`

display: none removes the element from the layout entirely. The space it would have occupied collapses. Use it to show or hide content with JavaScript.

Element is invisible and takes no space
Other elements fill the gap left behind
Still exists in the DOM, can be shown again with JavaScript
Common use: toggling menus, modals, and tabs on/off
Screen readers cannot read elements with display: none

display: none

The middle box is removed from layout, Box Three moves up.

.box {
  display: block;
  background: steelblue;
  color: white;
  padding: 10px;
  margin-bottom: 8px;
}

.hidden {
  display: none;
}

display: flex (Introduction)

Setting display: flex on a container turns its direct children into flex items. By default, items are arranged in a horizontal row. Flexbox is the modern replacement for float-based layouts.

`display: flex`

Flexbox makes it easy to align, space, and distribute items in one dimension (row or column). The full Flexbox topic is covered in a dedicated lesson.

flex container: the parent with display: flex
flex items: the direct children of the container
Default: items are placed in a row, no wrapping
justify-content: aligns items along the main axis
align-items: aligns items along the cross axis

display: flex

Three items laid out in a row with space between them.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f0f4f8;
  padding: 12px;
}

.item {
  background: steelblue;
  color: white;
  padding: 10px 16px;
  border-radius: 4px;
}

display: grid (Introduction)

display: grid enables a two-dimensional layout system with rows and columns. It is more powerful than flexbox for page-level layouts. The full Grid topic is covered in a dedicated lesson.

`display: grid`

Grid layouts define both rows and columns. grid-template-columns controls how many columns there are and how wide they are.

grid-template-columns: defines the column widths (e.g., 1fr 1fr 1fr for three equal columns)
gap: space between rows and columns
fr unit: fractional unit that fills available space
Grid items auto-place into cells unless manually positioned

display: grid

A simple two-column grid with four cards.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.card {
  background: steelblue;
  color: white;
  padding: 16px;
  border-radius: 4px;
  text-align: center;
}

visibility: hidden vs display: none

Both hide an element, but they behave differently in the layout. Understanding the difference is essential for choosing the right approach.

`visibility: hidden vs display: none`

The core difference: visibility: hidden hides the element but keeps the space it occupied. display: none removes it from the layout entirely.

display: none: element is gone; no space; other elements shift
visibility: hidden: element is invisible; space is preserved; other elements do not shift
Both are unreadable by screen readers
Use case for visibility: hidden: keeping layout stable while temporarily hiding content

visibility: hidden vs display: none

Box Two is gone entirely; Box Three is hidden but its space remains.

.box {
  background: steelblue;
  color: white;
  padding: 10px;
  margin-bottom: 8px;
}

.gone      { display: none; }
.invisible { visibility: hidden; }

opacity for Transparency

opacity sets how transparent an element is. A value of 1 is fully visible, 0 is fully transparent. Unlike display: none, an element with opacity: 0 still occupies space and can still receive mouse events.

`opacity`

opacity applies to the entire element including its children. For transparent backgrounds only, use rgba() or hsla() on the background-color instead.

opacity: 1: fully visible (default)
opacity: 0.5: 50% transparent
opacity: 0: fully invisible but still in layout and receives events
opacity affects the whole element including text and children
rgba() vs opacity: rgba() only affects the background; opacity affects everything

opacity

Decreasing opacity values fade the element and its contents.

.box {
  background: steelblue;
  color: white;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  font-weight: bold;
}

.full  { opacity: 1; }
.half  { opacity: 0.5; }
.faint { opacity: 0.2; }

Knowledge Check

1. Which display value makes an element take up the full width of its container and start on a new line?

2. What is the key difference between display: none and visibility: hidden?

3. Which display value allows setting width and height while keeping elements on the same line?

4. What does opacity: 0 do compared to display: none?

5. Which display value is the starting point for using Flexbox layout?

Previous Next