This content originally appeared on DEV Community and was authored by Vigneshwaralingam
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
flexorgrid) - 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 defaultdisplay: block -
<span>has a defaultdisplay: 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: hiddenhides the element but reserves space. -
display: nonehides 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 |
This content originally appeared on DEV Community and was authored by Vigneshwaralingam
Vigneshwaralingam | Sciencx (2025-06-11T17:16:52+00:00) 🧱 CSS `display` Property — What, When, Why, Where, How, and Which. Retrieved from https://www.scien.cx/2025/06/11/%f0%9f%a7%b1-css-display-property-what-when-why-where-how-and-which/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.