CSS Display

The CSS display property controls how an element is displayed on a webpage. It determines whether an element appears as a block, inline, flex, grid, or is completely hidden.

1️⃣ Commonly Used `display` Values

Value	Description	Example Element
`block`	Starts on a new line and takes full width.	`<div>`, `<p>`, `<h1>`
`inline`	Stays in line with other elements, takes only necessary width.	`<span>`, `<a>`, `<strong>`
`inline-block`	Similar to `inline`, but allows setting width and height.	`<button>`, `<input>`
`none`	Hides the element completely.	Any HTML element
`flex`	Arranges elements in a flexible row/column.	Used in layout design
`grid`	Aligns elements in a structured grid.	Used for complex layouts

2️⃣ `block` vs. `inline`

🔹 Block Elements (`display: block;`)

Takes full width.
Starts on a new line.
Example elements: <div>, <p>, <h1>, <section>

div {
  display: block;
  background-color: lightgray;
}

✔ Output:
A <div> will stretch across the full width of the container.

🔹 Inline Elements (`display: inline;`)

Takes only as much width as needed.
Does not start on a new line.
Example elements: <span>, <a>, <strong>, <em>

span {
  display: inline;
  background-color: yellow;
}

✔ Output:
A <span> remains in the same line with surrounding text.

3️⃣ `inline-block` – Best of Both Worlds

Behaves like inline, but allows setting width and height.
Useful for buttons, images, or styled text blocks.

button {
  display: inline-block;
  width: 150px;
  height: 40px;
  background-color: blue;
  color: white;
}

✔ Output:
A <button> remains inline but has a set width and height.

4️⃣ Hiding Elements with `display: none;`

This removes an element completely (unlike visibility: hidden;, which keeps space).

.hidden {
  display: none;
}

✔ The element won’t be visible and won’t take space.

5️⃣ Flexbox (`display: flex;`) – For Layouts

Makes elements responsive and aligned properly.
Great for horizontal or vertical layouts.

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

✔ Used for navigation bars, sidebars, and flexible grids.

6️⃣ Grid (`display: grid;`) – For Advanced Layouts

Aligns elements in rows and columns.
More powerful than flexbox for complex layouts.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

✔ Creates a 3-column layout with equal width.

7️⃣ Summary Table

Property	Effect	Example Use Case
`block`	Full-width element, starts on a new line.	`<div>`, `<p>`
`inline`	Stays in the same line, only takes necessary width.	`<span>`, `<a>`
`inline-block`	Like `inline`, but allows width/height adjustments.	`<button>`, `<img>`
`none`	Hides the element completely.	For popups, hidden menus
`flex`	Aligns elements flexibly in rows or columns.	Navigation bars, layouts
`grid`	Creates structured row-column layouts.	Webpage layout design

8️⃣ Conclusion

The CSS display property defines how elements appear on a webpage.

Use block for structural elements.
Use inline for text-level elements.
Use inline-block for styling inline elements.
Use flex and grid for responsive layouts.

CSS

CSS Display

1️⃣ Commonly Used display Values

2️⃣ block vs. inline

🔹 Block Elements (display: block;)

🔹 Inline Elements (display: inline;)

3️⃣ inline-block – Best of Both Worlds

4️⃣ Hiding Elements with display: none;

5️⃣ Flexbox (display: flex;) – For Layouts

6️⃣ Grid (display: grid;) – For Advanced Layouts