0
0
CSSmarkup~5 mins

Display property in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The display property controls how an element appears on the page. It helps decide if an element is shown, hidden, or arranged in a certain way.

To hide or show parts of a webpage without deleting them.
To arrange elements side by side or stacked vertically.
To change a block element into an inline element or vice versa.
To create flexible layouts using grid or flexbox.
To control how elements behave inside containers.
Syntax
CSS
selector {
  display: value;
}
The value can be things like block, inline, none, flex, or grid.
Changing display affects layout and visibility of elements.
Examples
Paragraphs are block elements by default, taking full width and stacking vertically.
CSS
p {
  display: block;
}
Spans are inline elements by default, flowing inside text without line breaks.
CSS
span {
  display: inline;
}
This hides the div completely from the page.
CSS
div {
  display: none;
}
Flex display arranges child elements in a row or column easily.
CSS
nav {
  display: flex;
}
Sample Program

This page shows different display values:

  • Block Box is a block element, so it takes full width and appears on its own line.
  • Inline Boxes are inline elements, so they sit side by side and ignore width/height.
  • None Box is hidden and does not appear.
  • Flex Container arranges its children in a row with spacing.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Display Property Example</title>
  <style>
    .block-box {
      display: block;
      width: 10rem;
      height: 5rem;
      background-color: lightblue;
      margin-bottom: 1rem;
      text-align: center;
      line-height: 5rem;
      border: 1px solid #333;
    }
    .inline-box {
      display: inline;
      width: 10rem; /* ignored for inline */
      height: 5rem; /* ignored for inline */
      background-color: lightgreen;
      border: 1px solid #333;
      padding: 0.5rem;
      margin-right: 1rem;
    }
    .none-box {
      display: none;
    }
    .flex-container {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
    }
    .flex-item {
      background-color: lightcoral;
      padding: 1rem;
      color: white;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>Display Property Demo</h1>
  <div class="block-box">Block Box</div>
  <span class="inline-box">Inline Box 1</span>
  <span class="inline-box">Inline Box 2</span>
  <div class="none-box">You cannot see me!</div>
  <div class="flex-container">
    <div class="flex-item">Flex 1</div>
    <div class="flex-item">Flex 2</div>
    <div class="flex-item">Flex 3</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Using display: none hides the element and it does not take space on the page.

Inline elements ignore width and height settings.

Flex and grid displays help create modern layouts easily.

Summary

The display property controls how elements appear and behave on the page.

Common values are block, inline, none, flex, and grid.

Changing display helps with layout and visibility of webpage parts.