18. CSS Display

What you will learn

The difference between block, inline, and inline-block
How to hide elements with display: none
Why display is the key to layout

What does display do?

Every element has a display value that decides how its box behaves. The default depends on the element: <div> and <p> are block, while <span> and <a> are inline.

Value	Behaviour
`block`	Starts on a new line and fills the full width. Width, height, margin, and padding all work
`inline`	Flows within a line of text. Width and height are ignored, and vertical margins do not push other lines
`inline-block`	Sits in a line like inline, but accepts width, height, and vertical spacing
`none`	Removes the element completely
`flex`, `grid`	Modern layout systems, covered in later lessons

Block versus inline

Example

<style>
  .b, .i {
    background-color: #cfe6ff;
    border: 1px solid #0d6efd;
    padding: 6px;
    width: 150px;
  }
  .b { display: block; }
  .i { display: inline; }
</style>

<span class="b">Block span</span>
<span class="b">Block span</span>
<p></p>
<span class="i">Inline span</span>
<span class="i">Inline span</span>

Output

Block span
Block span

Inline span
Inline span

The block spans stack and obey the 150px width. The inline spans sit side by side and ignore the width.

Inline-block

inline-block gives you the best of both: boxes sit side by side, and they can have a width, height, and padding.

Example

<style>
  .tile {
    display: inline-block;
    width: 90px;
    height: 60px;
    background-color: #0d6efd;
    color: white;
    text-align: center;
    line-height: 60px;
    margin: 4px;
  }
</style>

<div class="tile">One</div>
<div class="tile">Two</div>
<div class="tile">Three</div>

Output

One

Two

Three

Hiding elements

Two common ways to hide an element behave differently:

Rule	Effect
`display: none`	The element disappears and takes no space. Screen readers skip it too
`visibility: hidden`	The element is invisible but still takes up its space

Example

<style>
  .gone { display: none; }
  .ghost { visibility: hidden; }
</style>

<p>Line 1</p>
<p class="gone">Line 2 (display: none)</p>
<p class="ghost">Line 3 (visibility: hidden)</p>
<p>Line 4</p>

Output

Line 1

Line 3 (visibility: hidden)

Line 4

Line 2 leaves no gap. Line 3 leaves an empty gap.

Never hide important content from everyone with display: none and expect screen reader users to find it. Hidden means hidden for all, including assistive technology.

Changing the default

You can change how an element behaves. Making links block-level, for example, lets the whole row be clickable:

Syntax

nav a {
  display: block;
  padding: 10px;
}

Common mistakes

Setting width or height on an inline element and wondering why nothing happens.
Using display: none and then trying to measure or focus the element.
Gaps between inline-block items. The whitespace in your HTML becomes a small space, which Flexbox avoids.
Confusing display: none with visibility: hidden.

Exercise

Make each .badge an inline-block that is 60px wide with 6px of padding, a #0d6efd background, white text, and centred text.

Show solution

<style>
  .badge {
    display: inline-block;
    width: 60px;
    padding: 6px;
    background-color: #0d6efd;
    color: white;
    text-align: center;
  }
</style>
<span class="badge">New</span>
<span class="badge">Hot</span>

Knowledge check

1. Which display value ignores width and height?

inline

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

none removes the element and its space. hidden keeps the space.

3. Which value puts boxes side by side but accepts width and height?

inline-block

Summary

block fills the line, inline flows with text, inline-block mixes both.
display: none removes an element entirely.
display is the foundation of every layout technique.