QuitExams

What are CSS Display Properties?

The display property defines how an HTML element is displayed on a webpage. It determines whether the element behaves as a block, inline, inline-block, flex, grid, or hidden element.

1️⃣ display: block

Elements with display: block start on a new line and take up the full width available. Examples: <div>, <p>, <section>.

<style>
.block-example div {
  display: block;
  background: #ffebcd;
  margin: 10px 0;
  padding: 10px;
}
</style>

<div class="block-example">
  <div>Block 1</div>
  <div>Block 2</div>
</div>

2️⃣ display: inline

Inline elements do not start on a new line and only take up as much width as necessary. Examples: <span>, <a>, <strong>.

<style>
.inline-example span {
  display: inline;
  background: #b3e5fc;
  padding: 5px;
}
</style>

<div class="inline-example">
  <span>Inline 1</span>
  <span>Inline 2</span>
</div>

3️⃣ display: inline-block

This combines inline and block — it flows inline but allows setting width and height.

<style>
.inline-block-example div {
  display: inline-block;
  background: #d1c4e9;
  margin: 5px;
  width: 100px;
  height: 60px;
  text-align: center;
  line-height: 60px;
}
</style>

<div class="inline-block-example">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

4️⃣ display: none

Hides the element completely (it takes up no space on the page).

<style>
.none-example div {
  display: block;
  background: #ffcdd2;
  padding: 10px;
  margin: 5px;
}
.none-example .hidden {
  display: none;
}
</style>

<div class="none-example">
  <div>Visible</div>
  <div class="hidden">Hidden Element</div>
  <div>Visible Again</div>
</div>

5️⃣ display: flex

Creates a flexible layout container that can align and distribute space among its items.

<style>
.flex-example {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #c8e6c9;
  padding: 10px;
}
.flex-example div {
  background: #388e3c;
  color: white;
  padding: 15px;
  width: 80px;
  text-align: center;
}
</style>

<div class="flex-example">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

6️⃣ display: grid

Enables a grid-based layout with rows and columns.

<style>
.grid-example {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #e1bee7;
  padding: 10px;
}
.grid-example div {
  background: #6a1b9a;
  color: #fff;
  text-align: center;
  padding: 20px 0;
}
</style>

<div class="grid-example">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Summary

• block – takes full width, starts on new line
• inline – flows inline, no width/height
• inline-block – inline + allows width/height
• none – hides element
• flex – responsive flexible layout
• grid – structured grid layout