CSS Display – A Guide

The display property in CSS controls how elements are rendered and positioned on a webpage. It defines whether an element behaves as a block, inline, flex, grid, or hidden element. Mastering display helps in creating structured layouts and responsive designs.

What You Will Learn

1. Understanding the display Property
2. Block vs Inline Elements
3. display: block
4. display: inline
5. display: inline-block
6. display: none
7. display: flex
8. display: grid
9. display: table and display: table-cell
10. Using display for Layout Adjustments
11. Best Practices and Common Mistakes

1. Understanding the display Property

The display property determines how an element appears in the document layout.

Syntax

selector {
    display: value;
}

Common display Values

Value	Description
block	Takes full width, starts on a new line
inline	Fits content width, does not start a new line
inline-block	Behaves like inline but allows width/height control
none	Hides the element from the page
flex	Enables flexbox layout for better alignment
grid	Enables grid-based layout
table	Makes the element behave like a table
table-cell	Makes the element behave like a table cell

2. Block vs Inline Elements

Block elements:

• Take up the full width of their container.
• Always start on a new line.

Examples of block elements:

<div>This is a block element.</div>
<p>Paragraphs are block elements.</p>

Inline elements:

• Take up only the necessary width.
• Do not start on a new line.

Examples of inline elements:

<span>This is an inline element.</span>
<a href="#">Links are inline elements.</a>

3. display: block

Elements with display: block take up the entire width and push the next element to a new line.

Example: Block Elements

.block {
    display: block;
    background-color: lightblue;
    padding: 10px;
}

<div class="block">Block Element 1</div>
<div class="block">Block Element 2</div>

Common Block Elements

• <div>
• <p>
• <h1> to <h6>
• <section>
• <article>

4. display: inline

Elements with display: inline only take the space of their content and stay in line with other elements.

Example: Inline Elements

.inline {
    display: inline;
    background-color: yellow;
    padding: 5px;
}

<span class="inline">Inline Element 1</span>
<span class="inline">Inline Element 2</span>

Common Inline Elements

• <span>
• <a>
• <strong>
• <em>

5. display: inline-block

Elements with display: inline-block behave like inline elements but allow setting width and height.

Example: Inline-Block Elements

.inline-block {
    display: inline-block;
    width: 150px;
    height: 50px;
    background-color: green;
    text-align: center;
    line-height: 50px;
}

<div class="inline-block">Box 1</div>
<div class="inline-block">Box 2</div>

• Unlike inline, it respects width and height.
• Unlike block, it does not force new lines.

6. display: none

Hides an element completely, removing it from the layout.

Example: Hiding an Element

.hidden {
    display: none;
}

<p class="hidden">This paragraph is hidden.</p>

• The element does not occupy space on the page.
• Use visibility: hidden; if you want it to be hidden but still take up space.

7. display: flex

The display: flex property creates a flexbox container, which helps align items efficiently.

Example: Flexbox Layout

.flex-container {
    display: flex;
    gap: 10px;
}

.flex-item {
    background-color: lightcoral;
    padding: 10px;
    width: 100px;
    text-align: center;
}

<div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>

• Items align in a row by default.
• Use justify-content and align-items for alignment.

8. display: grid

The display: grid property creates a grid-based layout, useful for designing complex structures.

Example: CSS Grid Layout

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.grid-item {
    background-color: lightgreen;
    padding: 10px;
    text-align: center;
}

<div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
</div>

• Use grid-template-columns to define columns.
• gap controls the spacing between items.

9. display: table and display: table-cell

CSS can make elements behave like HTML tables without using <table>.

Example: Using Table Display

.container {
    display: table;
    width: 100%;
}

.cell {
    display: table-cell;
    border: 1px solid black;
    padding: 10px;
}

<div class="container">
    <div class="cell">Cell 1</div>
    <div class="cell">Cell 2</div>
</div>

• Useful for mimicking table layouts without an actual table.

10. Using display for Layout Adjustments

Creating a Horizontal Navigation Menu

.nav {
    display: flex;
    gap: 20px;
    background-color: #333;
    padding: 10px;
}

.nav a {
    color: white;
    text-decoration: none;
}

<div class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</div>

• Flexbox helps in aligning navigation items horizontally.

11. Best Practices and Common Mistakes

Best Practices

Use display: flex or grid for layouts instead of floats.
Use display: inline-block for buttons that need width and height.
Avoid using display: none excessively, as it removes elements from accessibility tools.
Use grid-template-columns for multi-column layouts instead of float.

Common Mistakes and Fixes

Mistake	Solution
Using inline on block elements	Use inline-block instead.
Forgetting to add a width to inline-block elements	Set width for proper spacing.
Using display: none; to hide content meant for SEO	Use visibility: hidden; instead.

Conclusion

• Use block for full-width elements.
• Use inline for small inline elements.
• Use inline-block to control width and height.
• Use flex and grid for complex layouts.
• Use none to hide elements completely.