CSS Display Property: Syntax, Usage, and Examples

The CSS display property defines how an element appears in the document flow, affecting layout, visibility, and interaction with other elements. It determines whether elements behave as block, inline, flex, grid, or other specialized types. Understanding this property is essential for structuring web pages effectively.

How to Use the CSS Display Property

The display property follows a straightforward syntax and accepts various values to define an element’s behavior within a layout.

element {
  display: value;
}

Common Display Property Values

• block – The element takes up the full width of its parent container and forces a new line.
• inline – The element stays in the text flow without forcing a line break.
• inline-block – Similar to inline, but allows width and height modifications.
• none – The element becomes invisible and removed from the layout.
• flex – Converts an element into a flexible container, enabling efficient alignment of child elements.
• grid – Turns an element into a grid container, allowing precise placement of child elements.
• inline-flex – Behaves like an inline element while maintaining flex properties.
• table – Makes an element act like a table.
• list-item – Applies list behavior, including bullet points or numbering.

When to Use the Display Property in CSS

Adjusting Default Element Behavior

HTML elements have predefined display values. Paragraphs (<p>) and divs (<div>) default to block, while spans (<span>) and links (<a>) default to inline. Modifying these values allows customization based on design needs.

span {
  display: block;
}

This changes <span> elements to occupy the full width of their parent container instead of staying within text flow.

Creating Responsive Layouts

Modern web designs rely on flexible structures that adjust to different screen sizes. The display property enables scalable, adaptable layouts using flexbox and grid.

.container {
  display: flex;
  justify-content: space-between;
}

This arranges child elements in a row with even spacing. Grid layouts provide precise positioning for complex structures.

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

Hiding and Showing Elements

Using display: none; removes elements from the visual layout while keeping them in the HTML. This is useful for dropdowns, modals, and dynamically toggled content.

.modal {
  display: none;
}

JavaScript can toggle the display value to make elements appear when needed.

document.querySelector(".modal").style.display = "block";

Controlling Inline and Block Elements

When elements need to remain inline while allowing width and height modifications, inline-block provides a balance.

.button {
  display: inline-block;
  width: 120px;
  height: 40px;

This method ensures buttons and links retain inline positioning while gaining controlled dimensions.

Examples of CSS Display Property in Action

Block vs. Inline Elements

By default, block elements span the full width of their container, while inline elements flow within text. Changing their display type adjusts their layout behavior.

h1 {
  display: inline;
}

This makes an <h1> element align with other inline elements instead of forcing a line break.

Creating a Navigation Bar with Flexbox

Flexbox efficiently distributes menu items across a navigation bar.

nav {
  display: flex;
  justify-content: space-around;
}

Each navigation item aligns evenly for a structured layout.

Toggling Visibility with JavaScript

Changing an element’s display property dynamically enhances interactivity.

function toggleMenu() {
  let menu = document.querySelector(".menu");
  menu.style.display = menu.style.display === "none" ? "block" : "none";
}

This function hides or shows a menu when triggered.

Learn More About the CSS Display Property

Specialized Display Values

Beyond standard block, inline, and flex behaviors, CSS includes additional display values for unique use cases:

• inline-table – Renders an element as an inline-level table.
• run-in – Merges an element with the next sibling (limited browser support).
• ruby – Displays an element using ruby annotations, useful for certain languages.

Combining Display with Position and Visibility

Using display, position, and visibility together creates dynamic interfaces. For instance, a dropdown menu can remain in the DOM but only appear when hovered over.

.dropdown-content {
  display: none;
  position: absolute;
}

.dropdown:hover .dropdown-content {
  display: block;
}

This keeps the dropdown hidden until a user interacts with the parent element.

Font Display and Performance

Though unrelated to layout, the font-display property controls how fonts load and render. This prevents invisible text while web fonts download.

@font-face {
  font-family: "CustomFont";
  src: url("font.woff2") format("woff2");
  font-display: swap;
}

Using swap ensures text remains visible while loading a custom font.

The display property is a fundamental CSS tool for controlling how elements behave in layouts. Whether structuring a page with block and inline elements, creating responsive designs with flex and grid, or hiding elements dynamically, understanding display types helps build efficient and visually appealing websites.