CSS display Property

What You’ll Learn

The display property is one of the most important CSS properties for layout. It controls whether an element behaves as a block, flows inline with text, becomes a flex or grid container, or disappears from the page entirely.

Introduction

The display property in CSS is one of the most powerful and commonly used properties. It specifies the display behavior of an element, determining how an element is displayed on the web page.

The display property can change an element’s box type, enabling it to switch between being a block-level element, an inline element, or even not being displayed at all.

Definition and Usage

Every visible element on a page has a display type. Block elements stack vertically and stretch to the container width. Inline elements sit in a line with surrounding text. Layout systems like Flexbox and Grid begin when you set display: flex or display: grid on a container.

📝 Syntax

The syntax for the display property is simple and can be applied to any HTML element.

element {
  display: value;
}

Basic Example

div {
  display: inline;
}

Default Value

The default value of the display property depends on the HTML element. For example, the default value for a <div> element is block, while the default value for a <span> element is inline.

Syntax Rules

• Changing display overrides the browser’s default for that element type.
• The property is not inherited — each element uses its own display value unless you set it explicitly.
• display: none removes the element from layout; use it for hiding content visually.
• flex and grid turn an element into a layout container for its children.
• Prefer semantic HTML first, then adjust display when you need a different visual layout.

💎 Property Values

The display property accepts many keyword values. These are the most important ones for beginners:

Block vs Inline vs Inline-Block

Examples Gallery

In this example, we’ll demonstrate the display property by changing a block-level <div> to an inline element — plus inline-block, hiding content, and a simple flex layout.

<style>
  .block-element {
    display: block;
    background-color: lightblue;
    padding: 10px;
    margin-bottom: 10px;
  }

  .inline-element {
    display: inline;
    background-color: lightgreen;
    padding: 10px;
  }
</style>

<h1>Display Property Example</h1>
<div class="block-element">I am a block element</div>
<div class="inline-element">I am an inline element</div>

.tag {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  margin: 0.25rem;
  background: #e0e7ff;
  border-radius: 999px;
}

.hidden-banner {
  display: none;
}

.toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

♿ Accessibility

• Avoid hiding important content with display: none unless it is truly not needed visually and for assistive tech.
• Prefer semantic elements — use <nav>, <button>, and <ul> instead of only changing div display types.
• Do not rely on display alone for responsive menus — pair hidden mobile menus with keyboard focus management.
• Screen readers and display: none — hidden content is usually skipped, but test critical UI like error messages carefully.
• Use hidden attribute or ARIA when you need more precise control over visibility for assistive technologies.

💡 Best Practices