Lesson 19: CSS Display · Block, Inline, Inline-Block, None & Visibility

Phase 1 of 11

Lesson Introduction

Welcome to Lesson 19! This lesson is about one of the most fundamental and powerful properties in all of CSS · the display property.

Every single element on a webpage has a display type. It controls how elements sit on the page · whether they stack on top of each other, sit side by side, or disappear from the page entirely.

Understanding display is the key that unlocks almost all layout work in CSS. When something looks wrong on your page · an element wrapping unexpectedly, two things not sitting next to each other, a gap where you don't want one · the display property is almost always involved.

By the end of this lesson, you will be able to:

Explain what the display property does and why it exists
Understand the difference between block and inline elements
Use display: block, display: inline, and display: inline-block
Use display: none to completely remove elements from the page
Use visibility: hidden to hide elements while keeping their space
Know when to use display: none vs visibility: hidden
Build a real-world navigation bar using display manipulation
Apply display changes to show and hide content dynamically

✏️ Your Task

Practise what you just learned about Lesson Introduction. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 2 of 11

Prerequisite Concepts

What Is an HTML Element?

An HTML element is a piece of content on a webpage wrapped in tags. For example:

html

<p>This is a paragraph.</p>
<span>This is a span.</span>
<div>This is a div.</div>

Each of these elements has a default display type built into the browser. You didn't have to write any CSS · the browser already decided whether it stacks vertically or sits inline. The display property lets you override that default.

What Does "Layout" Mean?

Layout is how elements are positioned and sized on the page. When you load a webpage, the browser reads your HTML and CSS from top to bottom, then decides:

Where does each element start?
How wide is it?
Does it force the next element onto a new line?

The display property is the #1 tool that controls all of these decisions.

✏️ Your Task

Practise what you just learned about Prerequisite Concepts. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 3 of 11

Part 1: The `display` Property · What It Is and Why It Exists

The Core Idea

Think of a webpage like a newspaper. Some content is laid out in big full-width blocks (like article headlines · they take the whole row). Other content flows within a line of text (like bold words or hyperlinks · they sit inside a sentence without breaking it).

CSS uses the same two ideas:

Block · like a paragraph. Takes the full width. Starts on a new line.
Inline · like a bold word. Only takes as much space as it needs. Sits inside a line.

The display property is how CSS controls this.

Every HTML Element Has a Default Display Value

The browser has built-in defaults for every HTML element. You can see this clearly:

Elements that default to block: <div>, <p>, <h1> through <h6>, <ul>, <ol>, <li>, <form>, <header>, <footer>, <section>, <article>, <nav>, <main>, <aside>, <blockquote>, <hr>, <table>

Elements that default to inline: <span>, <a>, <strong>, <em>, <b>, <i>, <u>, <img>, <input>, <button>, <label>, <code>, <abbr>

You can completely change an element's default behaviour using the display property.

✏️ Your Task

Practise what you just learned about : The display Property · What It Is and Why It Exists. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 4 of 11

Part 2: `display: block`

What Is a Block Element?

A block element behaves like a full-width bar. Here is exactly what it does:

It starts on a new line · nothing can sit to its left or right
It stretches to fill the full available width (unless you set a specific width)
It respects width, height, padding, margin, and border in all directions

Analogy: Imagine laying bricks in a single column. Each brick takes the full width of the wall and the next brick always goes below the previous one. That is how block elements work.

Quick Visual Demo

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      background-color: steelblue;
      color: white;
      padding: 10px;
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="box">Block 1</div>
  <div class="box">Block 2</div>
  <div class="box">Block 3</div>
</body>
</html>

Expected Visual Output: Three full-width blue bars stacked vertically, each on its own line:

code

[========== Block 1 ==========]
[========== Block 2 ==========]
[========== Block 3 ==========]

Forcing an Inline Element to Become Block

By default, <a> (links) are inline. You can force them to be block-level with display: block:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      display: block;
      background-color: #e8f0fe;
      padding: 10px 15px;
      margin: 5px 0;
      text-decoration: none;
      color: #333;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</body>
</html>

Expected Visual Output: Three links stacked vertically, each taking the full width · like a vertical menu.

code

[Home        ]
[About       ]
[Contact     ]

Why is this useful? Navigation menus, buttons that span the full width, and list items in a sidebar are all built this way.

Line-by-Line Explanation

display: block; · This tells the browser: "treat this <a> tag as if it were a <div>." It now starts on its own line and expands to full width.
padding: 10px 15px; · Adds space inside the link so it looks like a proper button/menu item.
margin: 5px 0; · Adds a small gap between each link vertically.

Thinking Prompt: What happens if you remove display: block from these links? They will all collapse onto one line next to each other, as inline elements do by default.

✏️ Your Task

Practise what you just learned about : display: block. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 5 of 11

Part 3: `display: inline`

What Is an Inline Element?

An inline element flows within text. Here is exactly what it does:

It does NOT start on a new line · it sits next to other inline elements
It only takes up as much width as its content · no more
It ignores width and height settings
It respects horizontal padding and margin but vertical padding/margin is unreliable

Analogy: Think of words in a sentence. The word "hello" does not start a new line · it just sits next to the words before and after it. Inline elements work the same way.

Quick Visual Demo · Default Inline Behaviour

html

<!DOCTYPE html>
<html>
<head>
  <style>
    span {
      background-color: #ffe57f;
      padding: 4px;
    }
  </style>
</head>
<body>
  <p>
    This is a sentence with a
    <span>highlighted word</span>
    right in the middle of it.
  </p>
</body>
</html>

Expected Visual Output: The <span> sits inside the sentence, highlighted in yellow · it does NOT break onto its own line.

code

This is a sentence with a [highlighted word] right in the middle of it.

Forcing a Block Element to Become Inline

By default, <li> (list items) are block-level. You can make them sit side by side with display: inline:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    li {
      display: inline;
      padding: 0 15px;
      list-style: none;
      background-color: #3366cc;
      color: white;
    }
  </style>
</head>
<body>
  <ul>
    <li>Home</li>
    <li>Products</li>
    <li>Services</li>
    <li>Contact</li>
  </ul>
</body>
</html>

Expected Visual Output: All four list items appear on the same horizontal line:

code

[Home] [Products] [Services] [Contact]

Real-world use: This is exactly how horizontal navigation bars are built! Making <li> items display: inline is a classic and fundamental technique.

The Limitation of `display: inline`

A key limitation: you cannot control width or height on inline elements. If you set width: 200px on a <span>, it is simply ignored.

css

span {
  display: inline;
  width: 200px;  /* This will be IGNORED */
  height: 50px;  /* This will also be IGNORED */
}

This is where display: inline-block saves the day.

✏️ Your Task

Practise what you just learned about : display: inline. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 6 of 11

Part 4: `display: inline-block`

The Best of Both Worlds

display: inline-block is a hybrid. It gives you:

Inline behaviour: Elements sit next to each other on the same line
Block behaviour: You CAN set width, height, padding, and margin in all directions

Analogy: Think of inline-block like stamps in a row. Each stamp has a fixed, controlled size, but they all sit side by side without stacking vertically.

Comparison: `inline` vs `inline-block` vs `block`

Property	`inline`	`inline-block`	`block`
Starts on new line?	No	No	Yes
Sits next to others?	Yes	Yes	No
Respects `width`/`height`?	No	Yes	Yes
Respects all margins?	Partially	Yes	Yes
Takes full width by default?	No	No	Yes

Simple Example · Inline Elements With Dimensions

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      display: inline-block;
      width: 120px;
      height: 80px;
      background-color: coral;
      color: white;
      text-align: center;
      line-height: 80px; /* vertically centres text */
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</body>
</html>

Expected Visual Output: Three equal-sized coral coloured squares sitting side by side on the same row:

code

[  Box 1  ] [  Box 2  ] [  Box 3  ]
(120x80px)  (120x80px)  (120x80px)

Without display: inline-block, these <div> elements would stack vertically (because <div> is block by default). With inline-block, they sit side by side and still respect their fixed dimensions.

Real-World Example · A Navigation Bar with `inline-block`

html

<!DOCTYPE html>
<html>
<head>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      background-color: #222;
    }

    nav ul li {
      display: inline-block;
    }

    nav ul li a {
      display: block;
      padding: 14px 20px;
      color: white;
      text-decoration: none;
    }

    nav ul li a:hover {
      background-color: #555;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

Expected Visual Output: A dark horizontal navigation bar with four clickable links side by side. Each link lights up grey on hover.

code

[Home]  [About]  [Services]  [Contact]     (dark background)

Thinking Prompt: Why do we set display: inline-block on the <li> AND display: block on the <a> inside it? The <li> goes inline so items sit side by side. The <a> goes block so its click area fills the entire <li> space · making the whole box clickable, not just the text.

`inline-block` for Card Grids

inline-block is also used to create grid-like card layouts:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      display: inline-block;
      width: 180px;
      padding: 15px;
      margin: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      vertical-align: top; /* aligns cards by their top edges */
      background-color: #f9f9f9;
    }

    .card h3 {
      margin: 0 0 8px 0;
      font-size: 16px;
    }

    .card p {
      margin: 0;
      font-size: 13px;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="card">
    <h3>Card A</h3>
    <p>Short description for this card.</p>
  </div>
  <div class="card">
    <h3>Card B</h3>
    <p>A slightly longer description that wraps over two lines.</p>
  </div>
  <div class="card">
    <h3>Card C</h3>
    <p>Another description here.</p>
  </div>
</body>
</html>

Expected Visual Output: Three card boxes sitting side by side, each 180px wide, aligned by their top edges.

Note on vertical-align: top: When inline-block elements have different heights, they align at their bottom edges by default. Adding vertical-align: top aligns them at the top · much better for cards.

✏️ Your Task

Practise what you just learned about : display: inline-block. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 7 of 11

Part 5: `display: none` · Completely Removing Elements

What Does `display: none` Do?

display: none completely removes an element from the page. It is as if the element does not exist at all:

It takes up no space
It is invisible
Other elements move in to fill the space it would have occupied
The HTML code is still there in the file · it just is not rendered

Analogy: Imagine you wrote a word on a piece of paper and then used correction fluid (whiteout) to cover it. The underlying word is still there on the paper · but visually it is gone and the words after it have moved to fill the gap.

Simple Example · Hiding a Paragraph

html

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      background-color: #dff0d8;
      padding: 10px;
      margin: 5px 0;
      border: 1px solid #ccc;
    }

    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <p>Paragraph 1 — I am visible.</p>
  <p class="hidden">Paragraph 2 — I am HIDDEN! (display: none)</p>
  <p>Paragraph 3 — I am visible.</p>
</body>
</html>

Expected Visual Output: Only paragraphs 1 and 3 appear. Paragraph 2 is completely gone · paragraph 3 moves up as if paragraph 2 was never there.

code

[Paragraph 1 — I am visible.  ]
[Paragraph 3 — I am visible.  ]

Real-World Use: Toggling Content with JavaScript

The most common real-world use of display: none is toggling content visibility with JavaScript. Here is a complete working example:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    #secret-message {
      display: none; /* hidden by default */
      background-color: #fff3cd;
      border: 1px solid #ffc107;
      padding: 15px;
      margin-top: 10px;
      border-radius: 4px;
    }

    button {
      padding: 10px 20px;
      background-color: #3366cc;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    button:hover {
      background-color: #254ea6;
    }
  </style>
</head>
<body>
  <button onclick="toggleMessage()">Show / Hide Message</button>

  <div id="secret-message">
    <strong>Surprise!</strong> This message was hidden. Now you can see it!
  </div>

  <script>
    function toggleMessage() {
      var msg = document.getElementById("secret-message");
      if (msg.style.display === "none" || msg.style.display === "") {
        msg.style.display = "block";
      } else {
        msg.style.display = "none";
      }
    }
  </script>
</body>
</html>

Expected Visual Output:

On page load: Only the button is visible
After clicking the button: A yellow message box appears below
After clicking again: The message disappears

Don't worry if the JavaScript is new to you! The CSS part (display: none / display: block) is what matters here. JavaScript is just flipping the display value back and forth. This pattern is used on almost every modern website.

`display: none` vs. `display: block` Toggling Pattern

This is the core pattern used by accordions, dropdowns, modals, and tabs on real websites:

css

/* Default: element is hidden */
.panel {
  display: none;
}

/* When "active" class is added by JavaScript */
.panel.active {
  display: block;
}

✏️ Your Task

Practise what you just learned about : display: none · Completely Removing Elements. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 8 of 11

Part 6: `visibility: hidden` · Hiding Without Removing Space

What Does `visibility: hidden` Do?

visibility: hidden makes an element invisible but it still takes up its original space on the page. Other elements do NOT move to fill its gap.

Property	Element Visible?	Takes Up Space?
`display: none`	No	No · space is removed
`visibility: hidden`	No	Yes · space remains

Analogy: Imagine a reserved seat at a cinema. display: none is like removing the seat entirely · the row gets shorter. visibility: hidden is like the seat being there but draped with a cloth · you can't see it, but it still occupies space. Nobody sits in it.

Direct Side-by-Side Comparison

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      display: inline-block;
      width: 100px;
      height: 60px;
      background-color: steelblue;
      color: white;
      text-align: center;
      line-height: 60px;
      margin: 5px;
    }

    .display-none {
      display: none;
    }

    .vis-hidden {
      visibility: hidden;
    }
  </style>
</head>
<body>
  <h3>With display: none (Box 2 removed):</h3>
  <div class="box">Box 1</div>
  <div class="box display-none">Box 2</div>
  <div class="box">Box 3</div>

  <h3>With visibility: hidden (Box 2 invisible but space kept):</h3>
  <div class="box">Box 1</div>
  <div class="box vis-hidden">Box 2</div>
  <div class="box">Box 3</div>
</body>
</html>

Expected Visual Output:

First row · display: none:

code

[Box 1]         [Box 3]
       ^ gap closed — Box 3 moved left

Second row · visibility: hidden:

code

[Box 1]  [     ]  [Box 3]
          ^ Box 2 is invisible but its space is still reserved

This is the key visual difference between the two techniques.

When to Use Each

Use display: none when:

You want the element completely gone from the layout
You are toggling menus, modals, tabs, or accordions
You want surrounding elements to fill in the space
You are making a responsive layout where certain elements don't exist on mobile

Use visibility: hidden when:

You want to hide an element but preserve the layout spacing around it
You have a table or grid where removing cells would break alignment
You want a "placeholder" element that keeps its space but is temporarily invisible
Animating opacity (combined with opacity: 0 for smooth transitions)

`visibility` Values

The visibility property has three values:

Value	Effect
`visible`	The element is visible (this is the default)
`hidden`	The element is invisible but still takes up space
`collapse`	For table rows/columns: removes them without affecting table layout

css

.element { visibility: visible; }  /* Default — visible */
.element { visibility: hidden; }   /* Invisible but space preserved */

Combining `display: none` with Responsive Design

A very common real-world pattern is hiding navigation menus on mobile:

css

/* Mobile: hide the desktop nav */
.desktop-nav {
  display: none;
}

/* On screens wider than 768px: show the desktop nav */
@media (min-width: 768px) {
  .desktop-nav {
    display: block;
  }
}

This is how websites show a hamburger menu on phones but a full navigation bar on desktops.

✏️ Your Task

Practise what you just learned about : visibility: hidden · Hiding Without Removing Space. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 9 of 11

Part 7: Other `display` Values (Quick Overview)

The display property has several more values worth knowing. These will each get their own detailed lessons, but here is a quick introduction so nothing surprises you:

`display: flex`

Turns an element into a flex container. All its children can be arranged in rows or columns with powerful alignment tools.

css

.container {
  display: flex;
  justify-content: space-between; /* distributes children evenly */
}

`display: grid`

Turns an element into a grid container. Children can be arranged in both rows AND columns simultaneously.

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}

`display: table`

Makes a non-table element behave like a <table>.

css

.fake-table {
  display: table;
}

`display: list-item`

Makes an element behave like a <li> · adds a bullet point marker.

css

span {
  display: list-item;
  margin-left: 20px;
}

Focus for this lesson: block, inline, inline-block, and none. These are the four you will use daily. flex and grid are covered in depth in their own lessons.

✏️ Your Task

Practise what you just learned about : Other display Values (Quick Overview). Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 10 of 11

Guided Practice Exercises

🎯 Your Challenge

Exercise 1 · Block vs Inline Observation

Objective: See and feel the difference between block and inline behaviour.

Scenario: You are building a simple recipe page. Ingredients are listed with <span> elements but they need to stack vertically for readability on mobile.

Steps:

Create an HTML file with five <span> elements, each containing an ingredient name.
Style them with a light background and padding.
Notice how they all sit on one line (inline default).
Now add display: block; to the span style.
Notice how they now each take their own line.

Starting code:

✏️ Task

Practise what you just learned about Guided Practice Exercises. Open your editor, type the examples above by hand, modify them, and observe what changes.

html

<!DOCTYPE html>
<html>
<head>
  <style>
    span.ingredient {
      background-color: #e8f5e9;
      padding: 6px 12px;
      border: 1px solid #a5d6a7;
      border-radius: 4px;
      margin: 4px;
      /* Try adding display: block; here */
    }
  </style>
</head>
<body>
  <h2>Ingredients</h2>
  <span class="ingredient">2 cups flour</span>
  <span class="ingredient">1 tsp salt</span>
  <span class="ingredient">3 eggs</span>
  <span class="ingredient">1 cup milk</span>
  <span class="ingredient">2 tbsp butter</span>
</body>
</html>

Step A · Expected output (no display: block): All ingredients on one line (may wrap if the screen is narrow).

Step B · Expected output (with display: block):

code

[2 cups flour  ]
[1 tsp salt    ]
[3 eggs        ]
[1 cup milk    ]
[2 tbsp butter ]

Self-check Questions:

Why do <span> elements sit on one line without display: block?
What happened to the spacing when you added display: block?
Can you set width: 300px on a <span> with and without display: block? What changes?

Exercise 2 · Building a Horizontal Navigation

Objective: Use display: inline to convert a vertical list into a horizontal nav bar.

Scenario: Your website has a list of navigation links. By default the <li> items stack vertically. You want them side by side.

Steps:

Create an unordered list with 4 navigation links.
Remove the bullet points with list-style: none.
Add display: inline to the <li> elements.
Style the links to look like nav items.

Solution:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    ul.nav {
      list-style: none;
      padding: 0;
      margin: 0;
      background-color: #2c3e50;
    }

    ul.nav li {
      display: inline;  /* KEY CHANGE: list items go horizontal */
    }

    ul.nav li a {
      display: inline-block;
      padding: 14px 22px;
      color: #ecf0f1;
      text-decoration: none;
      font-size: 14px;
    }

    ul.nav li a:hover {
      background-color: #34495e;
    }
  </style>
</head>
<body>
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</body>
</html>

Expected Visual Output: A dark horizontal navigation bar with four links side by side.

code

[Home]  [Portfolio]  [Blog]  [Contact]     (dark background)

Self-check Questions:

What happens if you remove display: inline from the <li> elements?
Why did we use display: inline-block on the <a> tags instead of display: inline?
What would happen if you gave <a> a width setting but it was display: inline?

Exercise 3 · Show and Hide a Panel

Objective: Use display: none and display: block to toggle a content panel.

Scenario: You are building an FAQ section. Each answer should be hidden by default and revealed when clicked.

Steps:

Create a question heading and an answer paragraph.
Set the answer to display: none initially.
Add a button that toggles the answer's visibility using JavaScript.

Solution:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .faq-item {
      border: 1px solid #ddd;
      border-radius: 6px;
      margin: 10px 0;
      overflow: hidden;
    }

    .faq-question {
      background-color: #f7f7f7;
      padding: 14px 16px;
      cursor: pointer;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
    }

    .faq-question:hover {
      background-color: #eaeaea;
    }

    .faq-answer {
      display: none; /* hidden by default */
      padding: 14px 16px;
      background-color: #fff;
      color: #444;
      border-top: 1px solid #ddd;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h2>Frequently Asked Questions</h2>

  <div class="faq-item">
    <div class="faq-question" onclick="toggleAnswer(this)">
      What is CSS? <span>+</span>
    </div>
    <div class="faq-answer">
      CSS stands for Cascading Style Sheets. It is used to control the
      visual appearance of HTML elements — things like colour, font size,
      spacing, and layout.
    </div>
  </div>

  <div class="faq-item">
    <div class="faq-question" onclick="toggleAnswer(this)">
      Why is the display property important? <span>+</span>
    </div>
    <div class="faq-answer">
      The display property controls how elements are arranged on the page.
      It determines whether an element takes a full row (block), sits inline
      with text, or is removed from the layout entirely.
    </div>
  </div>

  <script>
    function toggleAnswer(questionElement) {
      var answer = questionElement.nextElementSibling;
      if (answer.style.display === "block") {
        answer.style.display = "none";
      } else {
        answer.style.display = "block";
      }
    }
  </script>
</body>
</html>

Expected Visual Output:

On load: Two FAQ question bars visible; answers hidden
After clicking a question: Its answer slides open below
After clicking again: Answer hides

Self-check Questions:

What property starts each answer as invisible?
If you replaced display: none with visibility: hidden, would the answers still appear to "collapse"? What would change?

What-if challenge: Can you make both answers open at the same time? (Yes · each button controls its own sibling answer independently.)

Phase 11 of 11

Common Beginner Mistakes

Mistake 1: Setting `width` or `height` on a pure `inline` element

Wrong:

css

span {
  display: inline;
  width: 200px;   /* IGNORED on inline elements */
  height: 50px;   /* IGNORED on inline elements */
}

Fix: Use display: inline-block if you need dimensions:

css

span {
  display: inline-block; /* Now width and height work */
  width: 200px;
  height: 50px;
}

Mistake 2: Confusing `display: none` with `visibility: hidden`

Wrong thinking: "Both hide the element, so they are the same."

Reality: They are very different:

css

/* Removes element completely — other content moves in */
.gone { display: none; }

/* Invisible but the SPACE is still there — other content stays put */
.invisible { visibility: hidden; }

Mistake 3: Forgetting that `<li>` items have default `display: list-item`

css

li {
  display: inline; /* Works, but also removes the bullet point */
}

When you change <li> to display: inline, the bullet marker disappears automatically. If you want the bullet to stay, you cannot use display: inline. Use list-style: none explicitly when you do not want bullets.

Mistake 4: Not removing bullet points when making horizontal nav

Wrong (looks messy · bullets appear):

css

li {
  display: inline;
  /* Forgot to remove bullets! */
}

Correct:

css

ul {
  list-style: none; /* Removes bullets from the whole list */
  padding: 0;
  margin: 0;
}

li {
  display: inline;
}

Mistake 5: Using `display: none` to "style" something instead of CSS

Wrong approach: Hiding all elements and only showing one · instead of simply writing CSS for the one you want:

css

/* Don't do this when CSS can solve the visual problem */
.red-version { display: none; }
.blue-version { display: block; }

display: none is for dynamic behaviour (toggling with JavaScript) or responsive design, not for choosing between two static designs.

Mistake 6: Expecting `display: none` to remove something from screen readers

Wrong assumption: "display: none hides content from everyone."

Reality: display: none does remove content from screen readers too. But if you want content to be visually hidden but still accessible to screen readers, use this pattern instead:

css

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

This is an accessibility technique used for things like icon button labels that sighted users don't need to see but screen-reader users do.

Mistake 7: The `inline-block` whitespace gap

When you write inline-block elements in separate lines of HTML, a small whitespace gap appears between them. This is because the space (or newline) between HTML tags is rendered as a text space character.

HTML that causes a gap:

html

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

The gap appears because the newline between </div> and <div> is treated as a space.

Quick fixes:

css

/* Fix 1: Set font-size to 0 on the parent */
.parent {
  font-size: 0;
}
.box {
  display: inline-block;
  font-size: 16px; /* Reset font size on children */
}

/* Fix 2: Use negative margin (less clean) */
.box {
  display: inline-block;
  margin-right: -4px;
}

Note: Flexbox (display: flex) does not have this whitespace gap problem, which is one reason modern layouts prefer it over inline-block for complex grids.

✏️ Your Task

Practise what you just learned about Common Beginner Mistakes. Open your editor, type the examples above by hand, modify them, and observe what changes.

🏗️ Build It — Mini Project

Project Goal

Build a profile page that uses all the display techniques from this lesson:

A horizontal nav bar using display: inline-block
Profile cards using display: inline-block
Collapsible "bio" sections using display: none/display: block toggling
A footer using display: block elements

Stage 1 · Horizontal Navigation

starter.html

<!DOCTYPE html>
<html>
<head>
  <title>My Profile</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: Arial, sans-serif; background: #f4f4f4; color: #333; }

    /* Navigation */
    nav {
      background-color: #1a1a2e;
    }

    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    nav ul li {
      display: inline-block; /* Horizontal layout */
    }

    nav ul li a {
      display: block;
      padding: 16px 24px;
      color: #eee;
      text-decoration: none;
      font-size: 14px;
      letter-spacing: 0.5px;
    }

    nav ul li a:hover {
      background-color: #16213e;
      color: #4fc3f7;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Skills</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

Lesson 19 complete! 🎉

You covered:

✅ Lesson Introduction
✅ Prerequisite Concepts
✅ Part 1: The `display` Property · What It Is and Why It Exists
✅ Part 2: `display: block`
✅ Part 3: `display: inline`
✅ Part 4: `display: inline-block`
✅ Part 5: `display: none` · Completely Removing Elements
✅ Part 6: `visibility: hidden` · Hiding Without Removing Space

← Lesson 18 Lesson 20 →

CSS Display · Block, Inline, Inline-Block, None & Visibility

👋 Welcome to Lesson 19

What Is an HTML Element?

What Does "Layout" Mean?

The Core Idea

Every HTML Element Has a Default Display Value

What Is a Block Element?

Quick Visual Demo

Forcing an Inline Element to Become Block

Line-by-Line Explanation

What Is an Inline Element?

Quick Visual Demo · Default Inline Behaviour

Forcing a Block Element to Become Inline

The Limitation of display: inline

The Best of Both Worlds

Comparison: inline vs inline-block vs block

Simple Example · Inline Elements With Dimensions

Real-World Example · A Navigation Bar with inline-block

inline-block for Card Grids

What Does display: none Do?

Simple Example · Hiding a Paragraph

Real-World Use: Toggling Content with JavaScript

display: none vs. display: block Toggling Pattern

What Does visibility: hidden Do?

Direct Side-by-Side Comparison

When to Use Each

visibility Values

Combining display: none with Responsive Design

display: flex

display: grid

display: table

display: list-item

Exercise 1 · Block vs Inline Observation

Exercise 2 · Building a Horizontal Navigation

Exercise 3 · Show and Hide a Panel

Mistake 1: Setting width or height on a pure inline element

Mistake 2: Confusing display: none with visibility: hidden

Mistake 3: Forgetting that <li> items have default display: list-item

Mistake 4: Not removing bullet points when making horizontal nav

Mistake 5: Using display: none to "style" something instead of CSS

Mistake 6: Expecting display: none to remove something from screen readers

Mistake 7: The inline-block whitespace gap

Project Goal

Stage 1 · Horizontal Navigation

Lesson 19 complete! 🎉

The Limitation of `display: inline`

Comparison: `inline` vs `inline-block` vs `block`

Real-World Example · A Navigation Bar with `inline-block`

`inline-block` for Card Grids

What Does `display: none` Do?

`display: none` vs. `display: block` Toggling Pattern

What Does `visibility: hidden` Do?

`visibility` Values

Combining `display: none` with Responsive Design

`display: flex`

`display: grid`

`display: table`

`display: list-item`

Mistake 1: Setting `width` or `height` on a pure `inline` element

Mistake 2: Confusing `display: none` with `visibility: hidden`

Mistake 3: Forgetting that `<li>` items have default `display: list-item`

Mistake 5: Using `display: none` to "style" something instead of CSS

Mistake 6: Expecting `display: none` to remove something from screen readers

Mistake 7: The `inline-block` whitespace gap