Mastering CSS `Display`: A Developer’s Comprehensive Guide

Written by

webdevfundamentals

in

In the world of web development, the CSS `display` property is a fundamental concept, yet it often remains a source of confusion for developers of all levels. This tutorial aims to demystify `display`, providing a clear understanding of its various values and how they control the layout of your HTML elements. Mastering `display` is crucial because it dictates how an element behaves in terms of its box model, how it interacts with other elements, and ultimately, how your website looks and functions.

Understanding the Importance of `display`

Why is `display` so important? Imagine building a house without understanding how walls, doors, and windows fit together. Your website’s structure is similar. The `display` property is the key that determines how these ‘elements’ are arranged on the page. It controls whether an element is treated as a block, inline, inline-block, flex, grid, or something else entirely. Without a solid grasp of `display`, you’ll struggle with basic layout tasks like creating navigation menus, aligning elements, and building responsive designs.

This guide will walk you through each of the most common `display` values, providing clear explanations, practical examples, and common pitfalls to avoid. We’ll start with the basics and gradually move into more advanced concepts, ensuring you have a solid foundation to build upon.

The Core `display` Values

`display: block;`

The `block` value is the default for many HTML elements like `

`, `

`, `

` to `

`, “, and `

`. A block-level element takes up the full width available, always starting on a new line. Think of it as a container that stretches horizontally across the page.

Key Characteristics of `display: block;`

  • Takes up the full width available.
  • Starts on a new line.
  • Respects width, height, margin, and padding.

Example:

<div class="block-example">This is a block-level element.</div>

.block-example {
  display: block;
  width: 50%; /* The div will take up 50% of its parent's width */
  background-color: #f0f0f0;
  padding: 20px;
  margin: 10px;
}

In the example above, the `div` with the class `block-example` will occupy 50% of its parent’s width, have a gray background, and have padding and margin applied. You can easily control the size and spacing of block-level elements.

`display: inline;`

The `inline` value is the default for elements like ``, ``, ``, and ``. Inline elements only take up as much width as necessary to contain their content. They do not start on a new line and flow horizontally with other inline elements.

Key Characteristics of `display: inline;`

  • Takes up only the width of its content.
  • Does not start on a new line.
  • Respects width and height, but only horizontally. Vertical margins and padding may affect the layout, but not as expected.

Example:

<span class="inline-example">This is an inline element.</span>
<span class="inline-example">This is another inline element.</span>

.inline-example {
  display: inline;
  background-color: #e0ffff;
  padding: 10px;
  margin: 5px;
}

In this example, the two `span` elements will appear side-by-side, each with a light blue background and padding. You’ll notice that the elements are arranged horizontally, without forcing a line break.

`display: inline-block;`

The `inline-block` value combines the characteristics of both `block` and `inline` elements. It allows the element to sit on the same line as other elements (like `inline`), but you can also set width and height, and it respects margins and padding in all directions (like `block`).

Key Characteristics of `display: inline-block;`

  • Allows width and height to be set.
  • Respects padding, margin, and borders in all directions.
  • Can sit on the same line as other elements.

Example:

<div class="inline-block-example">Inline-block element 1</div>
<div class="inline-block-example">Inline-block element 2</div>

.inline-block-example {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-color: #ffffe0;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

These `div` elements will appear side-by-side (if there’s enough space) due to `inline-block`, each with a defined width, height, and other styling.

`display: flex;`

Flexbox (`display: flex`) is a powerful layout model for creating one-dimensional layouts (either a row or a column). It’s incredibly useful for aligning and distributing space among items in a container. Flexbox simplifies complex layouts, especially those that require dynamic resizing.

Key Characteristics of `display: flex;`

  • Creates a flex container.
  • Allows flexible alignment and distribution of space among items.
  • Excellent for creating responsive layouts.

Example:

<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>

.flex-container {
  display: flex;
  background-color: #f0fff0;
  padding: 20px;
}

.flex-item {
  background-color: #d9ffdb;
  margin: 10px;
  padding: 20px;
}

In this example, the `.flex-container` becomes a flex container, and its children (`.flex-item`) become flex items. By default, flex items are laid out horizontally. You can then use flex properties like `justify-content`, `align-items`, and `flex-grow` to control their alignment and distribution within the container.

`display: grid;`

CSS Grid (`display: grid`) is a two-dimensional layout system (rows and columns). It’s more powerful than Flexbox for creating complex layouts, especially those with both rows and columns. Grid allows you to define a layout with explicit rows and columns, providing more control over element placement.

Key Characteristics of `display: grid;`

  • Creates a grid container.
  • Allows for defining rows and columns.
  • Excellent for creating complex, two-dimensional layouts.

Example:

<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 class="grid-item">Item 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* Defines three columns */
  grid-template-rows: 50px 50px; /* Defines two rows */
  background-color: #f5f5dc;
  padding: 20px;
}

.grid-item {
  background-color: #f0ffff;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  text-align: center;
}

In this grid example, the `.grid-container` defines a grid with three columns and two rows. The `.grid-item` elements are then placed within this grid. Grid offers many more properties for controlling the placement, size, and alignment of grid items.

`display: none;`

The `none` value completely removes an element from the document flow. The element is not displayed, and it doesn’t take up any space on the page. It’s as if the element doesn’t exist.

Key Characteristics of `display: none;`

  • Removes the element from the document flow.
  • The element is not displayed.
  • The element takes up no space.

Example:

<p id="hidden-paragraph">This paragraph is hidden.</p>
<button onclick="hideParagraph()">Hide Paragraph</button>


function hideParagraph() {
  document.getElementById("hidden-paragraph").style.display = "none";
}

In this example, clicking the button will hide the paragraph with the ID `hidden-paragraph`. The paragraph will no longer be visible or take up any space on the page.

`display: table`, `display: table-row`, `display: table-cell` and related values

These values allow you to style elements as HTML table elements, even if they aren’t actual `

` elements. This can be useful for creating layouts that mimic table behavior without using tables (which can have semantic drawbacks for layout purposes).

Key Characteristics of table display values:

  • Mimic the behavior of HTML table elements.
  • `display: table` acts like `
`.
  • `display: table-row` acts like `<tr>`.
  • `display: table-cell` acts like `<td>`.

    • Example:

    <div class="table">
  <div class="table-row">
    <div class="table-cell">Cell 1</div>
    <div class="table-cell">Cell 2</div>
  </div>
  <div class="table-row">
    <div class="table-cell">Cell 3</div>
    <div class="table-cell">Cell 4</div>
  </div>
</div>

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

.table-row {
  display: table-row;
}

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

    This example creates a layout that resembles a table using `div` elements and the table display properties. This can be helpful for certain layout scenarios, but it’s less common than flexbox or grid for modern web design.

    Common Mistakes and How to Fix Them

    Overusing `display: inline-block;`

    While `inline-block` is useful, overuse can lead to unexpected spacing issues. Whitespace between inline-block elements in the HTML can create gaps in the layout.

    Fix: Remove whitespace between elements in your HTML, use negative margins, or use flexbox or grid for more robust layout control.

    Confusing `display: none;` and `visibility: hidden;`

    `display: none;` removes an element from the document flow, while `visibility: hidden;` hides the element but it still occupies space. This can lead to confusion if you expect an element to no longer affect the layout.

    Fix: Understand the difference between the two properties. Use `display: none;` when you want to completely remove an element and its space, and use `visibility: hidden;` when you want to hide the element while preserving its layout space.

    Not Considering the Parent Element’s `display` Value

    The `display` value of a parent element can affect how its children behave. For example, if a parent element is `display: flex;` or `display: grid;`, the direct children will be flex items or grid items, respectively, regardless of their own individual `display` values (though they can still be styled as flex or grid containers themselves).

    Fix: Always consider the parent element’s `display` value when styling child elements. Understand how different layout models interact.

    Using `display: block;` on inline elements without understanding the consequences

    Applying `display: block;` to an inline element, such as a ``, will make it behave like a block-level element. This can be useful, but you need to be aware that the element will now take up the full width available and start on a new line, which can disrupt the intended layout.

    Fix: Be mindful of how changing the `display` property affects the element’s behavior and the layout of surrounding elements. Consider using `display: inline-block` if you need to set width/height on an inline element without it taking up the full width.

    Step-by-Step Instructions for Common Layouts

    Creating a Horizontal Navigation Menu

    1. HTML Structure: Create an unordered list (`<ul>`) with list items (`<li>`) containing your navigation links (`<a>`).

    <nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

    2. CSS Styling: Set the `display` property of the `<li>` elements to `inline-block` to allow them to sit horizontally and control their width/height. Remove the default list bullet points with `list-style: none;`.

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

nav li {
  display: inline-block;
  padding: 10px 20px;
}

nav a {
  text-decoration: none;
  color: black;
}

    3. Result: Your navigation links will now appear horizontally, with padding and spacing applied.

    Creating a Two-Column Layout

    1. HTML Structure: Use two `<div>` elements, one for each column.

    <div class="container">
  <div class="column">Column 1 content</div>
  <div class="column">Column 2 content</div>
</div>

    2. CSS Styling (Flexbox method): Set the `display` property of the container (`.container`) to `flex`. This will make the columns flex items, which will lay out horizontally by default. You can also set `flex-direction: column;` to make them stack vertically.

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

.column {
  padding: 20px;
  border: 1px solid #ccc;
  flex: 1; /* Each column will take equal space */
}

    3. CSS Styling (Grid method): Set the `display` property of the container (`.container`) to `grid`. Define the columns using `grid-template-columns`. 

    .container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal-width columns */
  grid-gap: 20px; /* Adds space between columns */
}

.column {
  padding: 20px;
  border: 1px solid #ccc;
}

    4. Result: The two columns will be displayed side-by-side using either flexbox or grid. Flexbox is simpler for basic two-column layouts, while grid offers more flexibility and control for complex layouts.

    Summary / Key Takeaways

    The `display` property is a cornerstone of CSS layout. Understanding its various values is essential for creating well-structured and visually appealing websites. We’ve covered the core values: `block`, `inline`, `inline-block`, `flex`, `grid`, and `none`, along with their key characteristics and how to apply them effectively. Remember that `display` controls how elements are rendered and interact with each other in the document flow. Mastering `display` is a continuous learning process; experiment with different values, practice, and refer back to this guide as needed.

    FAQ

    Q: What’s the difference between `display: none;` and `visibility: hidden;`?

    A: `display: none;` removes the element from the document flow, meaning it’s not visible and doesn’t take up any space. `visibility: hidden;` hides the element, but it still occupies the space it would have taken up if it were visible.

    Q: When should I use `display: inline-block;`?

    A: Use `inline-block` when you want an element to behave like an inline element (e.g., sit horizontally next to other elements) but also be able to set width, height, and apply padding/margins in all directions. It’s often used for navigation menus and other horizontal lists.

    Q: What are the advantages of using `flex` and `grid`?

    A: `flex` (Flexbox) is excellent for one-dimensional layouts (rows or columns) and is particularly good for aligning items and distributing space. `grid` (CSS Grid) is for two-dimensional layouts (rows and columns) and provides more control for complex designs. Both offer better responsiveness and more flexible layouts compared to older techniques like floats.

    Q: How do I center an element horizontally and vertically using `flexbox`?

    A: To center an element both horizontally and vertically within a flex container, use the following CSS on the container:

    .container {
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
  height: 200px; /* Or any height for the container */
}

    Q: Why are there gaps between my `inline-block` elements?

    A: Gaps often appear between `inline-block` elements because of whitespace (spaces, tabs, newlines) in your HTML code between the elements. You can fix this by removing the whitespace, using negative margins, or using flexbox or grid for layout.

    Grasping the nuances of the `display` property is a journey, not a destination. As you continue to build and refine your web development skills, you’ll naturally become more comfortable with the different values and their applications. Remember to experiment, practice, and don’t be afraid to consult documentation and examples. The power to shape your web pages lies within the control you have over the elements, and by understanding and using `display`, you’re well on your way to mastering the art of web layout. Your ability to craft visually appealing and functional websites will be significantly enhanced as you become more proficient in this fundamental area of CSS, leading to more engaging and user-friendly online experiences for everyone who visits your creations.

    More posts