CSS chevron_right CSS Display Property

CSS Display Property

calendar_today schedule 15 min read

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

  • Understand how the display property fundamentally controls element layout behavior
  • Apply block, inline, inline-block, and none display values effectively
  • Use display property for creating responsive navigation menus and UI components
  • Distinguish between visibility: hidden and display: none for proper element control

1. Welcome and Introduction (5 minutes)

Icebreaker Activity

Welcome! Think about how different objects take up space in the real world. A bookshelf takes up the entire width of a wall (like a block element), while individual books can sit side by side (like inline elements). Now imagine if you could make any annoying element on a website completely disappear with display: none - what would it be? Pop-up ads? Cookie banners? Auto-playing videos?

Lesson Overview

  • Duration: 75 minutes
  • Prerequisites: Basic HTML structure and CSS syntax understanding
  • Materials Needed: Code editor, web browser with developer tools

2. Learning Objectives and Session Outline (5 minutes)

What We’ll Cover Today:

  1. Display Fundamentals - Understanding how display affects document flow
  2. Block vs Inline Elements - The two fundamental display types and their behaviors
  3. Hybrid Display Types - Inline-block and other useful display values
  4. Practical Applications - Building navigation menus, image galleries, and responsive layouts
  5. Troubleshooting - Common issues and debugging techniques

Success Criteria:

By the end of this session, you should be able to control element layout behavior confidently, create horizontal navigation menus, and know when to use each display type for optimal results.

3. Foundation Knowledge (15-20 minutes)

Core Concepts

Understanding the Document Flow

Before diving into display properties, it’s crucial to understand the normal document flow. HTML elements are arranged in the order they appear in your markup, following specific rules that determine how they interact with each other and take up space on the page.

Real-World Analogy: Think of document flow like reading a book. You start at the top-left and read across, then move to the next line. Block elements are like paragraphs (taking up full lines), while inline elements are like individual words within those lines.

Why This Matters: The display property is one of the most powerful tools for controlling layout. It determines whether an element behaves like a paragraph, a word, or something in between. Mastering display is essential for creating any kind of web layout.

The Box Model Connection

Every HTML element creates a rectangular box, and the display property determines how that box behaves in relation to other boxes. This directly affects:

  • How much horizontal and vertical space the element occupies
  • Whether other elements can sit alongside it
  • How width, height, margin, and padding properties behave

Default Display Values

HTML elements have built-in default display values:

  • Block elements: div, p, h1-h6, section, article, header, footer
  • Inline elements: span, a, strong, em, img, button
  • Special cases: Some elements like img and button are inline but can have width/height

Key Terminology

  • Block Element: Takes up the full width available and starts on a new line
  • Inline Element: Only takes up as much width as needed and flows with surrounding text
  • Document Flow: The natural order and positioning of elements on a webpage
  • Line Box: The invisible horizontal space that contains inline elements
  • Block Formatting Context: The area where block elements are laid out

4. Detailed Explanation and Examples (25-30 minutes)

Understanding Block Display

Block elements are the building blocks of web layout. They stack vertically, each starting on a new line, and expand to fill the full width of their container by default.

Characteristics of Block Elements

  1. Full Width: Takes up 100% of the parent container’s width (unless specified otherwise)
  2. New Line: Always starts on a new line, pushing subsequent elements below
  3. Respects Dimensions: Width, height, margin, and padding all work as expected
  4. Vertical Stacking: Multiple block elements stack on top of each other

When to Use Block Display

Block display is ideal for:

  • Layout containers: Sections, articles, navigation areas
  • Content blocks: Paragraphs, headings, lists
  • Structural elements: Headers, footers, sidebars
  • Any element that should take up its own horizontal space

Understanding Inline Display

Inline elements flow with the text content, sitting side by side like words in a sentence. They’re designed to be part of the text flow without disrupting it.

Characteristics of Inline Elements

  1. Content Width: Only takes up as much width as its content requires
  2. Same Line: Flows horizontally with surrounding text and elements
  3. Limited Dimensions: Width and height properties are ignored
  4. Vertical Limitations: Top and bottom margins/padding don’t affect layout

When to Use Inline Display

Inline display works best for:

  • Text formatting: Bold, italic, or colored text within paragraphs
  • Links within content: Navigation links that appear in sentences
  • Small UI elements: Icons, badges, or labels
  • Any element that should flow with text

Understanding Inline-Block Display

Inline-block combines the best of both worlds: elements flow horizontally like inline elements but respect width and height like block elements.

Characteristics of Inline-Block Elements

  1. Horizontal Flow: Sits side by side with other inline or inline-block elements
  2. Respects Dimensions: Width, height, margin, and padding all work properly
  3. Baseline Alignment: Aligns with the text baseline by default
  4. White Space Sensitivity: Spaces in HTML can create gaps between elements

When to Use Inline-Block Display

Inline-block is perfect for:

  • Navigation menus: Horizontal lists of links
  • Image galleries: Photos or thumbnails in rows
  • Button groups: Sets of buttons that should sit together
  • Any layout requiring both horizontal flow and size control

Common Misconceptions

  1. Misconception: All div elements must be block Reality: You can change any element’s display type regardless of its HTML tag

  2. Misconception: Inline elements can’t have backgrounds or borders Reality: They can have backgrounds and borders, but these don’t affect layout

  3. Misconception: Display: none and visibility: hidden do the same thing Reality: display: none removes the element from layout; visibility: hidden keeps its space

5. Live Coding Demonstration (20-25 minutes)

Example 1: Basic Display Types Comparison

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Property Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        
        .container {
            border: 2px solid #333;
            padding: 20px;
            margin: 20px 0;
        }
        
        .block-element {
            display: block;
            background: #e8f4fd;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #3498db;
        }
        
        .inline-element {
            display: inline;
            background: #fff2cc;
            padding: 5px 10px;
            margin: 10px; /* Note: vertical margins won't affect layout */
            border: 1px solid #f39c12;
        }
        
        .inline-block-element {
            display: inline-block;
            background: #d5f4e6;
            padding: 10px;
            margin: 5px;
            width: 120px;
            height: 60px;
            border: 1px solid #27ae60;
            text-align: center;
        }
        
        .none-element {
            display: none;
            background: #ffebee;
            padding: 10px;
            border: 1px solid #e74c3c;
        }
        
        .show-button {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>CSS Display Property Demonstration</h1>
    
    <div class="container">
        <h2>Block Elements</h2>
        <div class="block-element">Block Element 1 - Takes full width</div>
        <div class="block-element">Block Element 2 - Starts on new line</div>
        <div class="block-element">Block Element 3 - Stacks vertically</div>
    </div>
    
    <div class="container">
        <h2>Inline Elements</h2>
        <p>Here's some text with 
        <span class="inline-element">inline element 1</span> and 
        <span class="inline-element">inline element 2</span> and 
        <span class="inline-element">inline element 3</span> 
        flowing within the paragraph.</p>
    </div>
    
    <div class="container">
        <h2>Inline-Block Elements</h2>
        <div class="inline-block-element">Box 1</div>
        <div class="inline-block-element">Box 2</div>
        <div class="inline-block-element">Box 3</div>
    </div>
    
    <div class="container">
        <h2>Display: None Example</h2>
        <p>There should be a hidden element between these paragraphs.</p>
        <div class="none-element">I'm hidden with display: none!</div>
        <p>Notice how the hidden element doesn't take up any space.</p>
        <button class="show-button" onclick="toggleVisibility()">Toggle Hidden Element</button>
    </div>
    
    <script>
        function toggleVisibility() {
            const hiddenElement = document.querySelector('.none-element');
            const currentDisplay = window.getComputedStyle(hiddenElement).display;
            
            if (currentDisplay === 'none') {
                hiddenElement.style.display = 'block';
            } else {
                hiddenElement.style.display = 'none';
            }
        }
    </script>
</body>
</html>

Explanation:

  • Lines 16-22: Block elements stack vertically and take full width of their container
  • Lines 24-30: Inline elements flow with text; note that vertical margins don’t affect layout
  • Lines 32-40: Inline-block elements flow horizontally but respect width and height
  • Lines 42-47: Elements with display: none are completely removed from the layout

Example 2: Practical Navigation Menu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation with Display Property</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
        }
        
        /* Default vertical navigation (block) */
        .nav-vertical {
            background: #2c3e50;
            padding: 20px;
            width: 200px;
        }
        
        .nav-vertical ul {
            list-style: none;
        }
        
        .nav-vertical li {
            display: block; /* Default for li elements */
            margin-bottom: 10px;
        }
        
        .nav-vertical a {
            display: block; /* Makes entire area clickable */
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            background: #34495e;
            border-radius: 4px;
            transition: background 0.3s;
        }
        
        .nav-vertical a:hover {
            background: #4a6741;
        }
        
        /* Horizontal navigation using inline-block */
        .nav-horizontal {
            background: #3498db;
            padding: 0;
        }
        
        .nav-horizontal ul {
            list-style: none;
            text-align: center; /* Centers the inline-block elements */
        }
        
        .nav-horizontal li {
            display: inline-block; /* Key property for horizontal layout */
            margin: 0; /* Remove default margins */
        }
        
        .nav-horizontal a {
            display: block; /* Block within the inline-block li */
            color: white;
            text-decoration: none;
            padding: 15px 20px;
            transition: background 0.3s;
        }
        
        .nav-horizontal a:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        /* Responsive toggle */
        .nav-toggle {
            display: none;
            background: #e74c3c;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            width: 100%;
        }
        
        .main-content {
            padding: 40px 20px;
            margin-left: 220px; /* Account for vertical nav width */
        }
        
        @media (max-width: 768px) {
            .nav-vertical {
                width: 100%;
                position: relative;
            }
            
            .nav-vertical ul {
                display: none; /* Hidden by default on mobile */
            }
            
            .nav-vertical ul.show {
                display: block;
            }
            
            .nav-toggle {
                display: block;
            }
            
            .main-content {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
    <nav class="nav-vertical">
        <button class="nav-toggle" onclick="toggleMenu()">☰ Menu</button>
        <ul id="verticalMenu">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    
    <nav class="nav-horizontal">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    
    <main class="main-content">
        <h1>Display Property in Navigation</h1>
        <p>This page demonstrates how different display values create different navigation layouts:</p>
        <ul>
            <li><strong>Vertical Navigation:</strong> Uses default block display for stacked links</li>
            <li><strong>Horizontal Navigation:</strong> Uses inline-block for side-by-side layout</li>
            <li><strong>Responsive Design:</strong> Uses display: none to hide/show menu on mobile</li>
        </ul>
    </main>
    
    <script>
        function toggleMenu() {
            const menu = document.getElementById('verticalMenu');
            menu.classList.toggle('show');
        }
    </script>
</body>
</html>

Key Points:

  • Lines 29-31 and 52-54: Compare block vs inline-block for different layout effects
  • Lines 33-41: Making links display: block creates larger clickable areas
  • Lines 78-83: Using display: none for responsive menu hiding
  • Lines 52: inline-block allows horizontal flow while maintaining element control
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery Display Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: #f5f5f5;
        }
        
        .gallery-section {
            background: white;
            margin: 20px 0;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        /* Block layout - each image on its own line */
        .gallery-block .image-item {
            display: block;
            width: 300px;
            height: 200px;
            background: #3498db;
            margin: 10px 0;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
        }
        
        /* Inline layout - images flow like text */
        .gallery-inline .image-item {
            display: inline;
            background: #e74c3c;
            color: white;
            padding: 10px 15px;
            margin: 5px;
            border-radius: 4px;
            /* Note: width and height won't work here */
        }
        
        /* Inline-block layout - best for image galleries */
        .gallery-inline-block .image-item {
            display: inline-block;
            width: 150px;
            height: 100px;
            background: #27ae60;
            margin: 10px;
            color: white;
            text-align: center;
            line-height: 100px;
            border-radius: 4px;
            vertical-align: top; /* Aligns tops instead of baselines */
        }
        
        /* Filter buttons */
        .filter-buttons {
            margin: 20px 0;
        }
        
        .filter-btn {
            background: #34495e;
            color: white;
            border: none;
            padding: 10px 15px;
            margin: 5px;
            cursor: pointer;
            border-radius: 4px;
        }
        
        .filter-btn.active {
            background: #3498db;
        }
        
        /* Hidden items */
        .image-item.hidden {
            display: none;
        }
        
        /* Responsive adjustments */
        @media (max-width: 600px) {
            .gallery-inline-block .image-item {
                width: 120px;
                height: 80px;
                line-height: 80px;
                margin: 5px;
            }
        }
    </style>
</head>
<body>
    <h1>Image Gallery Layout Examples</h1>
    
    <div class="gallery-section">
        <h2>Block Layout (display: block)</h2>
        <p>Each image takes up the full width and stacks vertically:</p>
        <div class="gallery-block">
            <div class="image-item">Image 1 (Block)</div>
            <div class="image-item">Image 2 (Block)</div>
            <div class="image-item">Image 3 (Block)</div>
        </div>
    </div>
    
    <div class="gallery-section">
        <h2>Inline Layout (display: inline)</h2>
        <p>Images flow like text, but can't control dimensions:</p>
        <div class="gallery-inline">
            <div class="image-item">Img 1</div>
            <div class="image-item">Img 2</div>
            <div class="image-item">Img 3</div>
            <div class="image-item">Img 4</div>
            <div class="image-item">Img 5</div>
        </div>
    </div>
    
    <div class="gallery-section">
        <h2>Inline-Block Layout (display: inline-block)</h2>
        <p>Best of both worlds - horizontal flow with size control:</p>
        
        <div class="filter-buttons">
            <button class="filter-btn active" onclick="filterImages('all')">All</button>
            <button class="filter-btn" onclick="filterImages('nature')">Nature</button>
            <button class="filter-btn" onclick="filterImages('city')">City</button>
            <button class="filter-btn" onclick="filterImages('people')">People</button>
        </div>
        
        <div class="gallery-inline-block">
            <div class="image-item" data-category="nature">Nature 1</div>
            <div class="image-item" data-category="city">City 1</div>
            <div class="image-item" data-category="people">People 1</div>
            <div class="image-item" data-category="nature">Nature 2</div>
            <div class="image-item" data-category="city">City 2</div>
            <div class="image-item" data-category="people">People 2</div>
            <div class="image-item" data-category="nature">Nature 3</div>
            <div class="image-item" data-category="city">City 3</div>
        </div>
    </div>
    
    <script>
        function filterImages(category) {
            // Update active button
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // Show/hide images using display property
            document.querySelectorAll('.image-item').forEach(item => {
                if (category === 'all' || item.dataset.category === category) {
                    item.classList.remove('hidden');
                } else {
                    item.classList.add('hidden');
                }
            });
        }
    </script>
</body>
</html>

6. Hands-On Practice (30-40 minutes)

Exercise 1: Basic Display Property Practice (10 minutes)

Objective: Understand how changing display values affects element behavior

Instructions:

  1. Create a webpage with 6 div elements containing different content
  2. Apply different display values (block, inline, inline-block, none) to each
  3. Observe how they interact with each other
  4. Add a button that toggles between showing and hiding specific elements

Starter Code:

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            border: 2px solid #333;
            padding: 20px;
            margin: 20px 0;
        }
        
        .element {
            background: #3498db;
            color: white;
            padding: 10px;
            margin: 5px;
            border: 1px solid #2980b9;
        }
        
        /* Add your display properties here */
    </style>
</head>
<body>
    <div class="container">
        <div class="element element-1">Element 1</div>
        <div class="element element-2">Element 2</div>
        <div class="element element-3">Element 3</div>
        <div class="element element-4">Element 4</div>
        <div class="element element-5">Element 5</div>
        <div class="element element-6">Element 6</div>
    </div>
</body>
</html>

Solution:

.element-1 { display: block; background: #e74c3c; }
.element-2 { display: inline; background: #27ae60; }
.element-3 { display: inline-block; width: 100px; background: #f39c12; }
.element-4 { display: none; background: #9b59b6; }
.element-5 { display: inline; background: #1abc9c; }
.element-6 { display: block; background: #34495e; }

Exercise 2: Create a Responsive Navigation Menu (15 minutes)

Objective: Build a navigation that switches between horizontal and vertical layouts

Requirements:

  • Create a navigation menu with 5-6 links
  • Use inline-block for horizontal layout on desktop
  • Switch to block layout for mobile using media queries
  • Add a hamburger menu toggle for mobile
  • Include smooth transitions between states

Hints:

  • Use display: inline-block for horizontal navigation
  • Use display: none/block for mobile menu toggle
  • Consider using CSS transitions for smooth changes

Exercise 3: Interactive Content Showcase (15 minutes)

Objective: Create a content showcase with different display modes

Challenge: Build a webpage that displays content in three different ways:

  1. List view: All items displayed as block elements
  2. Grid view: Items displayed as inline-block in a grid
  3. Compact view: Items displayed as inline elements

Extension Ideas:

  • Add filtering functionality that hides/shows items
  • Create different animation effects for state changes
  • Make the layout responsive across different screen sizes
  • Add a search feature that dynamically shows/hides content

7. Common Pitfalls and Troubleshooting (10 minutes)

Frequent Mistakes

  1. Problem: Inline-block elements have unwanted gaps Cause: Whitespace in HTML creates visual gaps Solution: Remove whitespace in HTML, use font-size: 0 on parent, or use flexbox

  2. Problem: Inline elements ignore width and height Cause: Inline elements are designed to flow with text Solution: Use display: inline-block or display: block instead

  3. Problem: Display: none vs visibility: hidden confusion Cause: Not understanding the difference between hiding and removing Solution: Use display: none to remove from layout, visibility: hidden to hide but keep space

  4. Problem: Vertical alignment issues with inline-block Cause: Default baseline alignment Solution: Use vertical-align: top or other alignment values

Debugging Tips

  • Use browser developer tools to inspect computed display values
  • Add temporary background colors to visualize element boundaries
  • Check for inherited display values from parent elements
  • Use the box model inspector to see how elements take up space
  • Test responsive behavior by resizing the browser window

8. Best Practices and Professional Tips (5 minutes)

Industry Standards

  • Semantic HTML First: Choose HTML elements based on meaning, then adjust display as needed
  • Mobile-First Approach: Design for mobile display patterns first, then enhance for desktop
  • Performance Considerations: Changing display properties can trigger layout recalculation
  • Accessibility: Ensure that display changes don’t break keyboard navigation or screen readers

CSS Organization

  • Group display-related styles logically in your CSS
  • Use clear class names that indicate display behavior
  • Comment complex display interactions for future maintenance
  • Consider using CSS custom properties for consistent display patterns

Next Steps in Your Learning Journey

  • Study CSS Flexbox for modern one-dimensional layouts
  • Learn CSS Grid for two-dimensional layout control
  • Explore CSS positioning for precise element placement
  • Practice building complete responsive layouts using display properties

9. Summary and Review (5 minutes)

Key Takeaways

  1. Display property controls fundamental element behavior - block, inline, inline-block, and none each serve specific purposes
  2. Block elements stack vertically and take full width, perfect for layout containers
  3. Inline elements flow with text but have limitations with sizing and spacing
  4. Inline-block combines benefits of both block and inline for flexible layouts

Quick Review Questions

  1. What’s the difference between display: none and visibility: hidden?
  2. Which display value would you use for a horizontal navigation menu?
  3. Why might inline elements not respect your width and height CSS properties?

Answers:

  1. display: none removes the element from layout entirely; visibility: hidden hides it but preserves its space
  2. display: inline-block allows horizontal flow while maintaining control over dimensions
  3. Inline elements are designed to flow with text and ignore width/height to maintain text flow

For Instructors

Teaching Tips

  • Use visual examples and browser developer tools to show how display affects layout
  • Start with simple examples before moving to complex responsive layouts
  • Emphasize the connection between display choice and user experience
  • Show real-world websites that use different display patterns effectively

Assessment Ideas

  • Quick Quiz: Display property values and their effects on layout
  • Practical Project: Build a complete navigation system using different display types
  • Code Review: Students explain their display choices for different layout challenges

Adaptation Notes

  • For Beginners: Focus on the four main display values before introducing advanced concepts
  • For Advanced Students: Include CSS Grid and Flexbox as modern alternatives to inline-block
  • Online Delivery: Use screen sharing with browser inspector to clearly show layout effects
  • Time Management: Adjust exercise complexity based on student understanding of fundamental concepts