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, andinline-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
| Value | Behavior |
|---|---|
block | Takes up full width, starts on new line |
inline | Flows with text, doesn’t start on new line |
inline-block | Behaves like inline but allows width/height |
none | Hides 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.htmlStep 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!
🧪 Try It Yourself!
- Change one of the
<li>tags to usedisplay: blockand see how it affects the layout. - Replace
inline-blockwithinlineand notice how spacing changes. - Give one of the links a fixed width and height to see how
inline-blockbehaves. - 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
