Mastering CSS `Display`: A Comprehensive Guide

Written by

webdevfundamentals

in

In the world of web development, the way elements are displayed on a page is fundamental to creating effective and visually appealing layouts. CSS’s display property is the cornerstone of this control. It dictates how an HTML element is rendered, influencing its behavior, positioning, and interaction with other elements. Understanding and mastering the display property is crucial for any developer aiming to build responsive, adaptable, and user-friendly websites. Without a solid grasp of display, you might find yourself wrestling with unexpected behaviors, layout inconsistencies, and frustrating design limitations.

Understanding the Basics: What is the `display` Property?

The display property in CSS controls the rendering behavior of an HTML element. It determines the element’s ‘box’ type, which in turn influences how the element is displayed on the page, how it interacts with other elements, and how it responds to layout properties like width, height, margin, and padding. The display property accepts a variety of values, each offering a unique way to control an element’s presentation. These values can fundamentally change how an element is treated by the browser’s layout engine.

Common `display` Property Values

Let’s explore some of the most frequently used display property values and their implications:

display: block;

The block value is the default display type for many HTML elements, such as <div>, <p>, <h1>–<h6>, and <form>. A block-level element will:

  • Start on a new line.
  • Take up the full width available to it (unless otherwise specified).
  • Respect width, height, margin, and padding properties.

Example:

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


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

display: inline;

Inline elements, such as <span>, <a>, <strong>, and <img>, flow within the line of text. They:

  • Do not start on a new line.
  • Only take up as much width as necessary to contain their content.
  • Respect horizontal padding and margin, but vertical padding and margin may not affect layout as expected.
  • Cannot have their width and height explicitly set.

Example:


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


.inline-element {
  display: inline;
  background-color: #e0e0e0;
  padding: 5px;
  margin: 5px;
}

display: inline-block;

This value combines aspects of both inline and block. An inline-block element:

  • Flows with the text like an inline element.
  • Can have width and height set.
  • Respects padding, margin, and width/height properties.

Example:


<div class="inline-block-element">
  Inline-block element
</div>
<div class="inline-block-element">
  Another inline-block element
</div>


.inline-block-element {
  display: inline-block;
  width: 200px;
  height: 50px;
  background-color: #c0c0c0;
  margin: 10px;
  text-align: center;
  line-height: 50px; /* Vertically center text */
}

display: none;

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

Example:


<div class="hidden-element">
  This element is hidden.
</div>


.hidden-element {
  display: none;
}

display: flex; and display: inline-flex;

These values enable the use of the Flexbox layout model. display: flex creates a block-level flex container, while display: inline-flex creates an inline-level flex container. Flexbox is incredibly powerful for creating flexible and responsive layouts. This is a very important value and is covered in more detail later.

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: #ddd;
  padding: 10px;
}

.flex-item {
  background-color: #f0f0f0;
  margin: 5px;
  padding: 10px;
  text-align: center;
}

display: grid; and display: inline-grid;

Similar to Flexbox, display: grid (block-level) and display: inline-grid (inline-level) enable the Grid layout model, offering powerful two-dimensional layout capabilities. Grid is particularly well-suited for complex layouts with rows and columns.

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: repeat(2, 1fr); /* Two equal-width columns */
  grid-gap: 10px;
  background-color: #eee;
  padding: 10px;
}

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

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

These values allow you to use CSS to create layouts that mimic HTML table structures. Although less common in modern web design due to the popularity of Flexbox and Grid, they can be useful in specific scenarios where tabular data presentation is needed.

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 #ccc;
  padding: 8px;
  text-align: left;
}

display: list-item;

This value causes an element to behave like a list item (<li> element). It’s often used when you want to create a custom list or apply list-specific styles to non-list elements.

Example:


<div class="list-element">Item 1</div>
<div class="list-element">Item 2</div>


.list-element {
  display: list-item;
  list-style-type: square; /* Customize the list marker */
  margin-left: 20px; /* Indent the list item */
}

Deep Dive: Flexbox and Grid with `display`

Flexbox and Grid are two of the most powerful layout tools available in modern CSS. Understanding how display: flex and display: grid work is essential for creating complex and responsive layouts. Let’s delve deeper into these technologies.

Flexbox (display: flex)

Flexbox is designed for one-dimensional layouts (either a row or a column). It excels at aligning and distributing space between items in a container. Key concepts include:

  • Flex Container: The parent element with display: flex.
  • Flex Items: The children of the flex container.
  • Main Axis: The primary axis of the flex container (horizontal by default).
  • Cross Axis: The axis perpendicular to the main axis.
  • Key Properties: flex-direction, justify-content, align-items, flex-wrap, flex-grow, flex-shrink, flex-basis, and align-self.

Example: Creating a horizontal navigation bar.


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


.navbar {
  display: flex;
  background-color: #333;
  padding: 10px;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 10px;
  margin-right: 10px;
}

In this example, the <nav> element is the flex container, and the <a> elements are flex items. The display: flex property enables Flexbox, and the links are displayed horizontally. You can further customize the layout using Flexbox properties such as justify-content to align items along the main axis (e.g., to the start, end, center, or space-between) and align-items to align items along the cross axis (e.g., to the top, bottom, center, or baseline).

Grid (display: grid)

Grid is designed for two-dimensional layouts (rows and columns). It offers more advanced layout capabilities than Flexbox, especially for complex structures. Key concepts include:

  • Grid Container: The parent element with display: grid.
  • Grid Items: The children of the grid container.
  • Grid Lines: The lines that make up the grid structure.
  • Grid Tracks: The space between grid lines (rows and columns).
  • Grid Cells: The space between four grid lines.
  • Grid Areas: Custom areas that can span multiple grid cells.
  • Key Properties: grid-template-columns, grid-template-rows, grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-area, justify-items, align-items, grid-gap, etc.

Example: Creating a simple responsive grid layout.


<div class="grid-container">
  <div class="grid-item">Header</div>
  <div class="grid-item">Navigation</div>
  <div class="grid-item">Main Content</div>
  <div class="grid-item">Sidebar</div>
  <div class="grid-item">Footer</div>
</div>


.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr; /* Two columns: one fixed, one flexible */
  grid-template-rows: auto 1fr auto; /* Rows: header, content, footer */
  grid-gap: 10px;
  height: 300px; /* Set a height for demonstration */
}

.grid-item {
  background-color: #eee;
  padding: 10px;
  border: 1px solid #ccc;
}

/* Positioning grid items using grid-column and grid-row */
.grid-item:nth-child(1) { /* Header */
  grid-column: 1 / 3; /* Span across both columns */
}

.grid-item:nth-child(2) { /* Navigation */
  grid-row: 2 / 3;
}

.grid-item:nth-child(3) { /* Main Content */
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.grid-item:nth-child(4) { /* Sidebar */
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.grid-item:nth-child(5) { /* Footer */
  grid-column: 1 / 3; /* Span across both columns */
}

In this example, the <div class="grid-container"> is the grid container. The grid-template-columns and grid-template-rows properties define the grid structure. The grid-column and grid-row properties are used to position the grid items within the grid. This creates a basic layout with a header, navigation, main content, sidebar, and footer.

Step-by-Step Instructions: Implementing `display`

Let’s walk through a practical example of using the display property to create a responsive navigation bar. This example will demonstrate how to switch between a horizontal menu on larger screens and a vertical, mobile-friendly menu on smaller screens.

Step 1: HTML Structure

Create the basic HTML structure for your navigation bar. This will include a <nav> element containing an unordered list (<ul>) with list items (<li>) for each menu item.


<nav class="navbar">
  <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>

Step 2: Basic CSS Styling

Start with some basic CSS to style the navigation bar, setting the background color, padding, and removing the default list styles.


.navbar {
  background-color: #333;
  padding: 10px;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* Initially display items horizontally */
  justify-content: flex-start; /* Align items to the start */
}

.navbar li {
  margin-right: 20px;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 10px;
  display: block; /* Make the links take up the full list item space */
}

At this stage, the navigation items will be displayed horizontally because of the display: flex on the <ul> element.

Step 3: Creating the Mobile-Friendly Menu with Media Queries

Now, use a media query to change the display property when the screen size is smaller (e.g., mobile devices). This will transform the horizontal menu into a vertical menu.


@media (max-width: 768px) {
  .navbar ul {
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
  }

  .navbar li {
    margin-right: 0; /* Remove right margin */
    margin-bottom: 10px; /* Add bottom margin for spacing */
  }

  .navbar a {
    text-align: center; /* Center the text */
    padding: 10px; /* Add padding for better touch targets */
  }
}

In this media query, when the screen width is 768px or less:

  • The flex-direction of the <ul> is changed to column, stacking the list items vertically.
  • The align-items is set to center, centering the menu items horizontally.
  • Margins and padding are adjusted for better mobile usability.

Step 4: Testing and Refinement

Test your navigation bar by resizing your browser window or using your browser’s developer tools to simulate different screen sizes. Ensure the menu transitions smoothly between the horizontal and vertical layouts. You may need to adjust the media query breakpoint (768px in this example) to suit your design’s specific needs. Consider adding a hamburger menu icon for even better mobile user experience.

Common Mistakes and How to Fix Them

Mastering the display property requires understanding common pitfalls. Here are a few mistakes and how to avoid them:

Mistake 1: Not Understanding the Default Values

Problem: Not realizing that elements have default display values, leading to unexpected layout behavior.

Solution: Always be aware of the default display value for each HTML element. Refer to documentation or use your browser’s developer tools to inspect the element’s computed styles. Common elements like <div> are block-level, while <span> elements are inline by default.

Mistake 2: Incorrect Use of inline and block

Problem: Applying display: inline to elements that need to have width and height, or applying display: block to elements that should flow with the text.

Solution: Choose the appropriate display value based on the desired layout behavior. Use inline-block if you need an element to flow inline but also require width and height. Use block for elements that need to take up the full width available.

Mistake 3: Misunderstanding Flexbox and Grid

Problem: Not grasping the fundamentals of Flexbox and Grid, leading to layout issues.

Solution: Study the concepts of flex containers, flex items, grid containers, and grid items. Learn how to use properties like flex-direction, justify-content, align-items, grid-template-columns, and grid-template-rows. Practice with simple examples to build your understanding.

Mistake 4: Not Using Media Queries for Responsiveness

Problem: Creating layouts that don’t adapt to different screen sizes.

Solution: Use media queries to adjust the display property (and other styles) based on screen size. This is crucial for creating responsive websites that look good on all devices. For example, you might change a navigation bar from horizontal (display: flex) to vertical (flex-direction: column) on smaller screens.

Mistake 5: Overuse of display: none

Problem: Using display: none excessively when other options like visibility: hidden or adjusting element positioning might be more appropriate.

Solution: Consider the implications of each approach. display: none removes the element from the document flow, while visibility: hidden hides the element but it still occupies space. Choose the method that best fits your design needs and the desired user experience.

Key Takeaways and Best Practices

Here’s a summary of the essential concepts and best practices for mastering the CSS display property:

  • Understand the Basics: Know the difference between block, inline, inline-block, and none.
  • Embrace Flexbox and Grid: Learn and use Flexbox and Grid for modern layout design. They are essential tools.
  • Plan Your Layout: Think about the structure and how elements should behave on different screen sizes before writing CSS.
  • Use Media Queries: Create responsive designs by using media queries to adjust the display property based on screen size.
  • Inspect Element: Use your browser’s developer tools to inspect elements and understand their computed styles.
  • Practice: Experiment with different display values and layouts to build your skills. Practice is key to mastery.

FAQ

Here are some frequently asked questions about the CSS display property:

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

A: display: none removes the element from the document flow, meaning it takes up no space and the layout is adjusted as if the element doesn’t exist. visibility: hidden hides the element visually, but it still occupies the same space it would if it were visible. The layout does not change.

Q: When should I use inline-block?

A: Use inline-block when you want an element to behave like an inline element (flow with text) but also have the ability to set its width, height, padding, and margin. This is useful for creating layouts like navigation bars where you want elements to sit side by side and have specific dimensions.

Q: How do I center an element horizontally using display: block?

A: To center a block-level element horizontally, set its width and then use margin: 0 auto;. For example: 


.centered-element {
  display: block;
  width: 200px;
  margin: 0 auto;
  background-color: #ccc;
}

Q: What is the best way to create a responsive layout?

A: The best way to create a responsive layout is to use a combination of techniques, including: Flexbox or Grid for layout, relative units (e.g., percentages, ems, rems) for sizing, and media queries to adjust the layout based on screen size.

Q: Are there any performance considerations when using display?

A: Generally, the display property itself doesn’t have significant performance implications. However, complex layouts (especially those involving many nested elements or frequent changes to display) can potentially impact performance. It’s more important to optimize the overall structure and the CSS rules used in combination with the display property, rather than focusing solely on display itself. Avoid excessive DOM manipulations if possible.

The display property is a foundational element of CSS, and its mastery is essential for creating well-structured, responsive, and visually appealing web pages. From the basic building blocks of block and inline to the powerful capabilities of Flexbox and Grid, the display property provides the tools necessary to control how your content is presented. By understanding the various values and their implications, you can create layouts that adapt seamlessly to different devices and screen sizes, ensuring a consistent and enjoyable user experience. Consistent practice, experimentation, and a keen eye for detail will allow you to harness the full potential of this fundamental CSS property. Remember to consider the context of your design, choose the appropriate display value for your elements, and always test your layouts across different devices to ensure optimal results. As you become more proficient, you’ll find that the display property is not just a tool for controlling the presentation of elements; it’s a key to unlocking the full creative potential of web design.

More posts