ReviseAlgo Logo

CSS Basics

Display

Master the CSS display property, covering block, inline, inline-block, and the key differences in width, height, and margins.

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will master the CSS display property. By the end of this topic, you will be able to:

  • Differentiate between block-level and inline-level element behavior.
  • Configure and explain when to use the inline-block value.
  • Contrast the layout impact of display: none vs visibility: hidden.
  • Understand the default display states of common HTML elements.

2. Overview

The display property specifies how an element is rendered in the document layout flow. It determines the box category the element generates—affecting its ability to take widths, heights, margins, and padding, and how it aligns with neighboring elements.

3. Why This Topic Matters

The display property controls box formatting context. Misunderstanding display values leads to layout design errors:

  • Ignored Sizing Properties: Developers often try to set width, height, or vertical margins on inline elements (like anchor tags or spans) and wonder why the browser ignores the CSS instructions.
  • Hidden Space Pitfalls: Hiding elements using visibility: hidden leaves an empty space in the layout, whereas display: none removes the element from the layout flow entirely.

4. Real-World Analogy

Think of laying out webpage boxes like **arranging items on a store shelf**:

  • Block Elements: Large, heavy crates. Each crate is placed on a fresh shelf level, taking up the full shelf width. No other item can sit next to it.
  • Inline Elements: Small pricing stickers. They sit side-by-side on the shelf within a single row. You cannot change their physical box height directly without changing the sticker font.
  • Inline-block Elements: Small decorative jars. They sit side-by-side in a row like pricing stickers, but they have a solid, defined size (width and height) like crates.
  • Display None vs Visibility Hidden:
    • Display None: Removing a jar from the shelf entirely. Nearby jars slide over to fill the empty space.
    • Visibility Hidden: Making a jar completely invisible. The space on the shelf remains occupied by the invisible jar.

5. Core Concepts

Display Value Sizing Support (Width/Height) Layout Behavior
block Yes (width and height apply). Defaults to 100% parent width. Starts on a new line; stacks vertically.
inline No (width and height are ignored). Size is defined by content. Sits side-by-side inline; wraps with text. Vertical margins are ignored.
inline-block Yes (width, height, padding, margins apply). Sits side-by-side inline, but behaves as a block box internally.

6. Syntax & API Reference

Adjust display states inside your stylesheets using the following syntax:

7. Visual Diagram

This diagram displays the default layout flow of block, inline, and inline-block boxes:

8. Live Example — Full Working Code

A sample HTML document demonstrating how block, inline, and inline-block elements behave:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the display value of the inline elements to inline-block and observe if the width and height constraints apply.
  2. Compare the rendering difference between applying display: none vs visibility: hidden on the block element container.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Sizing inline elements Attempting to set width and height values on inline element tags like <span>. span { width: 100px; } span { display: inline-block; width: 100px; }
Confusing display: none and visibility: hidden Using visibility: hidden expecting the element's layout footprint to collapse. visibility: hidden; (leaves empty space) display: none; (fully collapses element footprint)

11. Best Practices

  • Use inline-block for side-by-side elements that need sizing: Use inline-block when elements (like buttons or navigation links) need to sit side-by-side but require padding, margins, width, or height properties.
  • Understand the default display types: Remember which elements are block-level (e.g. <div>, <p>, <h1-h6>) and which are inline (e.g. <a>, <span>, <strong>) to avoid styling bugs.
  • Use display: none to fully collapse elements: Use display: none when hiding elements (like hidden dropdown menus) so they don't take up layout space or interfere with keyboard navigation.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
block, inline, inline-block support Supported Supported Supported Supported

13. Interview Questions

🟢 Q1: What is the difference between display: none and visibility: hidden?

Answer: display: none removes the element from the document layout flow entirely. It collapses its layout space as if the element does not exist. visibility: hidden makes the element invisible, but leaves its layout footprint in the document flow, keeping the occupied space empty.

14. Debugging Exercise

Identify and fix the display styling issue in this navigation layout:

View Solution

Diagnosis: Anchor elements (<a>) default to display: inline. Because inline elements ignore width and height properties and do not respect vertical padding properly, the dimensions are ignored. To fix this, change the anchor elements to display: inline-block.

Fixed CSS:

15. Practice Exercises

Exercise 1: Horizontal Tab Menu

Build a tab menu using list items inside an unordered list. Change the default block-level display state of the list items to `inline-block` to align them horizontally, and add hover background color changes.

16. Scenario-Based Challenge

The Dynamic Toggle Modal layout Challenge:

You are designing a customer support system featuring a dropdown help dialog box. When the dialog box is inactive, it should disappear completely without reserving space or blocking clicks on underlying inputs. Outline which display properties should be toggled via CSS class rules to implement this functionality.

17. Quick Quiz

Q1: Which display value allows elements to sit side-by-side inline while respecting width and height properties?

A) inline

B) block

C) inline-block

Answer: C — The inline-block value allows elements to align inline while supporting block-level box sizing model constraints.

18. Summary & Key Takeaways

  • • Inline elements ignore width and height properties and do not support vertical margins.
  • • inline-block combines inline alignment with block-level box sizing controls.

19. Cheat Sheet

Declaration Visual Layout Action
display: none; Hides the element and collapses its footprint in the document layout flow.