CSS display Property

The display property in CSS controls how an element is displayed on the page. It determines whether an element is treated as a block, inline, flex, grid, or hidden.

1. Syntax

selector {
  display: value;
}

Value	Description
block	The element takes up the full width and starts on a new line.
inline	The element stays in line with other elements, only taking up necessary space.
inline-block	Like inline, but allows width & height.
none	Hides the element (removes it from layout).
flex	Enables Flexbox layout for flexible positioning.
grid	Enables Grid layout for precise layout control.
inline-flex	Like flex, but behaves as an inline element.
inline-grid	Like grid, but behaves as an inline element.
table	Makes an element behave like a table.

2. Example – display: block;

p {
  display: block;
}

<p>This paragraph takes up full width.</p>
<p>This is another paragraph.</p>

✅ Each <p> starts on a new line.

3. Example – display: inline;

span {
  display: inline;
  background: yellow;
}

<span>Inline 1</span>
<span>Inline 2</span>

✅ Both <span> elements stay in the same line.

4. Example – display: inline-block;

button {
  display: inline-block;
  width: 100px;
  height: 50px;
}

✅ The button remains inline but respects width & height.

5. Example – display: none;

.hidden {
  display: none;
}

<p class="hidden">This text is hidden.</p>

✅ The <p> is completely removed from the layout.

6. Example – display: flex;

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

✅ Items align in a flexible row.

7. Example – display: grid;

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

✅ Items align in a 2-column grid.

8. Best Practices

✔ Use display: flex; for responsive layouts.
✔ Use display: none; for hiding elements (avoid visibility: hidden; if you want it removed from layout).
✔ Use display: inline-block; when you need inline elements with size control.