CSS Display Property

Learn how to control element layout using the CSS display property

What is the CSS Display Property?

The CSS display property determines how an element is displayed on the web page. It's one of the most important CSS properties for controlling layout.

Common Display Values:

  • block - Element starts on a new line and takes full width
  • inline - Element flows within content, no line breaks
  • inline-block - Like inline but can have width/height
  • none - Element is hidden and removed from layout
  • flex - Block-level flex container
  • grid - Block-level grid container
  • table - Behaves like a table element

Block vs Inline Elements

Block Elements

  • Start on a new line
  • Take the full width available
  • Respect width, height, margin, and padding properties
  • Examples: div, p, h1-h6, section, article
Block Element 1
Block Element 2

Inline Elements

  • Flow within content
  • Only take as much width as needed
  • Do not respect width and height properties
  • Examples: span, a, strong, em, img

This paragraph contains inlineelements that flow with the text.

Inline-Block Elements

The Best of Both Worlds

Inline-block elements flow like inline elements but can have width, height, margins, and padding like block elements.

  • Flows horizontally like inline elements
  • Accepts width and height properties
  • Respects vertical margins and padding
  • Useful for navigation menus, buttons, and other horizontal layouts
Box 1
Box 2
Box 3

Display: None vs Visibility: Hidden

display: none

  • Element is completely removed from the layout
  • Does not take up any space
  • Cannot be interacted with
  • Screen readers will skip it
Visible Element
Another Visible Element

visibility: hidden

  • Element is invisible but still takes up space
  • Maintains its position in the layout
  • Cannot be interacted with
  • Screen readers will skip it
Visible Element
Another Visible Element

Display Property in Action

Example Code

/* Display Property Examples */
.element {
  /* Basic display values */
  display: block;        /* Block-level element */
  display: inline;       /* Inline element */
  display: inline-block; /* Inline-block element */
  display: none;         /* Hidden element */
  
  /* Flexbox layout */
  display: flex;         /* Block-level flex container */
  display: inline-flex;  /* Inline-level flex container */
  
  /* Grid layout */
  display: grid;         /* Block-level grid container */
  display: inline-grid;  /* Inline-level grid container */
  
  /* Table layout */
  display: table;        /* Behaves like <table> */
  display: table-row;    /* Behaves like <tr> */
  display: table-cell;   /* Behaves like <td> */
  
  /* List item */
  display: list-item;    /* Behaves like <li> */
  
  /* Other values */
  display: contents;     /* Element disappears, children become direct children of parent */
  display: flow-root;    /* Creates a block formatting context */
}

/* Media query example */
@media (max-width: 768px) {
  .responsive-element {
    display: block;
  }
}
< PreviousNext >