🧱 CSS `display` Property — What, When, Why, Where, How, and Which

The display property in CSS is like the foundation of how elements behave on your web page. Whether you're placing a button, text, navbar, or card — the display property decides how it will appear and interact.

Let’s break it down using the 5W1H method for easy learning and interview prep.

---

❓ What is the display property?

The display property defines how an HTML element should behave in the layout — as a block, inline, grid, flex, etc. It controls whether elements stack, sit side-by-side, take full width, or just wrap their content.

---

🕒 When do you use display?

Use it whenever you want to:

• Control layout behavior (horizontal/vertical)
• Change how elements appear (e.g., from block to inline)
• Build responsive UIs (with flex or grid)
• Hide/show elements (display: none)

---

💡 Why is display important?

• It determines spacing, alignment, and structure
• Helps build layouts without using JavaScript
• Powers modern layouts like navbars, cards, galleries, forms, etc.
• Essential for mobile responsiveness

---

🌍 Where is it applied?

You can apply display to any HTML element, either via:

.classname {
  display: value;
}

Or inline:

<div style="display: flex;">...</div>

---

⚙️ How does display work?

There are different display values. Here are the most common ones with behavior:

---

🔹 block

• Takes full width
• Starts on a new line

display: block;

🧱 Example elements: <div>, <p>, <h1> (default)

---

🔹 inline

• Doesn’t start a new line
• Width and height cannot be set

display: inline;

📝 Example elements: <span>, <a>

---

🔹 inline-block

• Like inline, but allows setting width and height

display: inline-block;

📦 Use case: buttons, icons

---

🔹 none

• Hides the element completely (no space taken)

display: none;

🚫 Use case: hide elements conditionally

---

🔹 flex

• One-dimensional layout system (row or column)
• Easy alignment, spacing, and responsiveness

display: flex;

🧩 Use case: navbars, form layouts, cards

---

🔹 grid

• Two-dimensional layout system (rows + columns)

display: grid;

🧱 Use case: dashboards, image galleries, advanced layouts

---

🔎 Which to use? (Quick Guide)

Goal	Use this
Full-width stacking	block
Inline element like link/text	inline
Button with width/height	inline-block
Hide element	none
Responsive rows/columns	flex
Full layout with rows/columns	grid

---

📐 Practical Example

<div style="display: flex;">
  <div style="margin: 10px; padding: 20px; background: lightblue;">Box 1</div>
  <div style="margin: 10px; padding: 20px; background: lightgreen;">Box 2</div>
</div>

👆 Two boxes side-by-side using Flexbox!

---

🧠 Differences Between Display Types

Property	block	inline	inline-block	flex	grid
New Line	✅ Yes	❌ No	❌ No	❌ No	❌ No
Set width/height	✅ Yes	❌ No	✅ Yes	✅ Yes	✅ Yes
Use for layout	❌ Basic	❌ Text only	❌ Small components	✅ One-dimensional	✅ Two-dimensional

---

Here are interview questions and answers based on the CSS display property, ideal for freshers and junior developers. This is a great way to prepare for interviews or even include in your blog.

---

🎯 CSS display Property – Interview Questions & Answers

---

✅ 1. What is the display property in CSS?

Answer:
The display property defines how an HTML element should behave in the document layout. It controls whether an element appears as a block, inline, flex, grid, etc.

---

✅ 2. What is the default display value for a <div> and a <span>?

Answer:

• <div> has a default display: block
• <span> has a default display: inline

---

✅ 3. What is the difference between block and inline elements?

Answer:

Feature	block	inline
Starts on new line	✅ Yes	❌ No
Takes full width	✅ Yes	❌ Only required width
Set width/height	✅ Yes	❌ No

---

✅ 4. What is inline-block and when would you use it?

Answer:
inline-block behaves like an inline element (doesn't start on a new line) but allows you to set width, height, margin, and padding.
Use it for components like buttons or badges.

---

✅ 5. What does display: none do?

Answer:
It removes the element from the layout completely. It won't be visible, and it won't occupy any space on the page.

---

✅ 6. What is the difference between visibility: hidden and display: none?

Answer:

• visibility: hidden hides the element but reserves space.
• display: none hides the element and removes it from layout.

---

✅ 7. What is Flexbox and how is it related to display?

Answer:
Flexbox is a 1D layout model used to arrange items in rows or columns. To use it, you set:

.container {
  display: flex;
}

Then you can control item alignment using justify-content, align-items, etc.

---

✅ 8. When would you use display: grid over display: flex?

Answer:

• Use Flexbox for one-dimensional layouts (row OR column).
• Use Grid for two-dimensional layouts (row AND column).

---

✅ 9. Can you list some HTML tags and their default display values?

Answer:

Tag	Default Display
<div>	block
<span>	inline
<p>	block
<img>	inline-block
<a>	inline
<ul>/<ol>	block
<li>	list-item

---

✅ 10. How can you center a div using display property?

Answer:
Using Flexbox:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

This centers the child both horizontally and vertically.

---

✅ 11. What happens when you apply display: flex to a parent element?

Answer:
All direct children become flex items, and you can align, space, and order them using Flexbox properties like gap, flex-direction, justify-content, etc.

---

✅ 12. What is the difference between display: block and display: flex?

Answer:

Feature	block	flex
Layout type	Vertical stack	One-dimensional layout
Alignment control	❌ Not flexible	✅ Easily aligns items
Responsive	❌ Manual	✅ Flexible/responsive

---