Skip to content

Understanding Display Types In CSS | Lecture 18

Display Types In CSS

Let’s begin with Lecture 18 of the HTML5 & CSS3 series. Understanding Display Types – Block, Inline, and Inline-Block. This lecture is for absolute beginners; even kids can follow along and understand.

🎯 Objective:

By the end of this lecture, you will:

  • Understand what display types are in CSS
  • Know the difference between block, inline, and inline-block
  • Be able to control how elements behave on a webpage
  • Style links and layout components using display properties
  • Fix common layout issues caused by incorrect display types

💡 What Are Display Types?

In HTML, every element has a default display type that determines how it appears on the page.

Think of it like this:

If elements were toys, then display types decide if they sit on their own shelf (block), share space with others (inline), or act like a block but flow inline (inline-block).

🔤 Common Display Values

ValueBehavior
blockTakes up full width, starts on new line
inlineFlows with text, doesn’t start on new line
inline-blockBehaves like inline but allows width/height
noneHides the element completely
📦 display: block;

Elements like <div>, <p>, <h1>–<h6>, and <ul> are block by default.

Characteristics:
  • Always starts on a new line
  • Takes up full width available
  • Can set height, width, margin, padding
Example:
.block {
    display: block;
}
↔️ display: inline;

Elements like <span>, <a>, <strong>, and <em> are inline by default.

Characteristics:
  • Doesn’t start on a new line
  • Width and height can’t be controlled
  • Only horizontal margins/padding work
Example:
.inline {
    display: inline;
}
📦↔️ display: inline-block;

A mix of both — behaves like an inline element but allows setting width, height, margin, and padding.

Characteristics:
  • Flows inline with text and other inline elements
  • Allows size adjustments (width, height)
  • Great for navigation menus, buttons, or grid items
Example:
.inline-block {
    display: inline-block;
}
💻 Try This: Make a Navigation Bar Using inline-block

Let’s create a simple horizontal navigation bar using inline-block.

Step 1: Create a New File

In your VS Code project folder (MyFirstWebsite), create a new file named:

navigation-bar.html
Step 2: Add This Code
<!DOCTYPE html>
<html>
<head>
    <title>Navigation Bar</title>
    <style>
        body {
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
            padding: 40px;
        }

        nav {
            background-color: #333;
            padding: 10px;
        }

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

        li {
            display: inline-block;
            margin-right: 10px;
        }

        li:last-child {
            margin-right: 0;
        }

        a {
            color: white;
            text-decoration: none;
            padding: 8px 12px;
            background-color: #555;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

        a:hover {
            background-color: #777;
        }
    </style>
</head>
<body>
    <h1>My Navigation Bar</h1>

    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="contact-form.html">Contact</a></li>
            <li><a href="my-favorites.html">Favorites</a></li>
            <li><a href="game-scores.html">Game Scores</a></li>
        </ul>
    </nav>

    <p>Welcome to my website! Use the navigation bar above to explore.</p>

    <p><a href="index.html">Back to Home</a></p>
</body>
</html>
Step 3: Run with Live Server

Right-click the code → Show All Commands → Launch Live Server

🎉 You’ve built a clean, horizontal navigation bar using inline-block!

Display Types In CSS
A kid typing into a computer screen looking an Display Block

🧪 Try It Yourself!

  1. Change one of the <li> tags to use display: block and see how it affects the layout.
  2. Replace inline-block with inline and notice how spacing changes.
  3. Give one of the links a fixed width and height to see how inline-block behaves.
  4. Try hiding one of the menu items using display: none.
🚀 Next Lecture Preview:

In Lecture 19, we’ll learn how to use float and clear — a classic technique used before Flexbox and Grid for creating layouts like multi-column designs, image galleries, and more!

Stay Updated

If you found this information useful, don’t forget to bookmark this page and Share.

HTML5 and CSS3 Compleate Series

Tags: