Home 〉 CSS Tutorials 〉 CSS Display Property Explained with Examples | Block, Inline, Flex, Grid
CSS Display Property Explained with Examples | Block, Inline, Flex, Grid !
CSS Display Property Explained with Examples | Block, Inline, Flex, Grid !
Not sure why your element won’t behave the way you want? The `display` property controls how elements behave in layout—whether as block, inline, flex, or grid. Learn how each value works and when to use them. This property is the foundation of any webpage layout.
Introduction
The 'display' property in CSS defines how an HTML element is shown on the page. It is one of the most important layout tools in web design. Whether you're building a layout, hiding elements, or aligning content, 'display' plays a key role.
In this tutorial, you'll learn about different display values including 'block', 'inline', 'inline-block', 'flex', 'grid', 'none', and more—with clear examples for each.
Note: This post gives a quick overview of 'display: table', 'display: flex', and 'display:grid'. We have covered a separate blog post for the same.
- CSS Display Table Property Explained with Examples | Learn Table Layout in CSS
- CSS Flexbox Tutorial: Master CSS Display Flex Property with Examples
- CSS Grid Layout Tutorial for Beginners | Complete Guide with Examples
Why is the Display Property Important?
HTML elements have default display behaviors:
- '<div>' is block-level.
- '<span>' is inline.
- '<table>' has table display.
CSS lets you override this with the 'display' property to control how elements behave and interact in layout.
Syntax
Syntax ✍
selector {
display: value;
}
Example 📄
div {
display: flex;
}
Common Display Values with Examples
1. 'display: block'
- Takes full width.
- Starts on a new line.
- Example: '<div>', '<p>', '<h1>' are block by default.
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<p style="background-color: aquamarine; padding: 10px; margin: 5px;">This is a Para 1</p>
<p style="background-color: aquamarine; padding: 10px; margin: 5px;">This is a Para 2</p>
<label style="background-color: aquamarine; padding: 10px; margin: 5px;">This is Label 1</label>
<label style="background-color: aquamarine; padding: 10px; margin: 5px;">This is Label 2</label>
<label style="display: block; background-color: aquamarine; padding: 10px; margin: 5px;">This is Label 3</label>
<label style="display: block; background-color: aquamarine; padding: 10px; margin: 5px;">This is Label 4</label>
</body>
</html>
output 📌
This is a Para 1
This is a Para 2
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- In the bove example 'p' tag is 'block level element', so margin and padding are applicable for them.
- But, the 'lable' tag is an 'inline level element', so margin & padding are applicable on them (eg Lable 1 & Label 2)
- By giving 'display: block' to label 3 & label 4, it will act as a 'block level element' and margin padding will be applicable for them.
2. 'display: inline'
- Takes only the space it needs.
- Doesn't start on a new line.
- Example: '<span>', '<a>', '<strong>' are inline by default.
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<p style="background-color: aquamarine; padding: 10px; margin: 5px;">This is a Para 1</p>
<p style="background-color: aquamarine; padding: 10px; margin: 5px;">This is a Para 2 </p>
<p style="display: inline; background-color: aquamarine; padding: 10px; margin: 5px;">This is a Para 3 </p>
<p style="display: inline; background-color: aquamarine; padding: 10px; margin: 5px;">This is a Para 4</p>
</body>
</html>
output 📌
This is a Para 1
This is a Para 2
This is a Para 3
This is a Para 4
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- In the above example, 'p' tag is a 'block level element', so margin & padding are applicable on them
- Whereas, by giving 'display: inline', it will act as 'inline level element', where margin and padding are not effected.
3. 'display: inline-block'
Like inline, but you can set width/height.
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<p>This is a Para 1</p>
<p>This is a Para 2</p>
<p>This is a <span>Span 1</span></p>
<p>This is a <span style="background-color: aquamarine; padding: 10px; margin: 10px;">Span 2</span></p>
<p>This is a <span style="background-color: aquamarine; padding: 10px; margin: 10px;">Span 3</span></p>
<p>This is a <span style="display: inline-block; background-color: aquamarine; padding: 10px; margin: 10px;">Span 4</span></p>
<p>This is a Para 3</p>
</body>
</html>
output 📌
This is a Para 1
This is a Para 2
This is a Span 1
This is a Span 2
This is a Span 3
This is a Span 4
This is a Para 3
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- Use when you want a mix of inline flow and block-level styling.
- in the above example, 'span' tag is an 'inline level element', so margin & padding will not get effected.(eg. Span 2 & span 3)
- But, after giving 'display: inline-block', it will act as a 'block level element' and all properties of 'block level element' will be applicable (eg span 4)
4. 'display: none'
- Hides the element completely.
- The element does not take up space.
Code : 4 📝
<!DOCTYPE html>
<html>
<body>
<p>You can see me!</p>
<p style="display: none;">You can't see me!</p>
<p>You can see me!</p>
</body>
</html>
output 📌
You can see me!
You can see me!
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Useful for toggling visibility with JavaScript.
5. 'display: flex'
- Enables Flexbox layout.
- Easy way to align and space items.
Code : 5 📝
<!DOCTYPE html>
<html>
<body>
<div style="display: flex;">
<div style="background: lightcoral; padding: 10px;">Item 1</div>
<div style="background: lightblue; padding: 10px;">Item 2</div>
<div style="background: lightgreen; padding: 10px;">Item 3</div>
<div style="background: lightsalmon; padding: 10px;">Item 4</div>
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Great for horizontal/vertical layouts, centering. Refer to our detailed tutorial on CSS Flexbox Tutorial: Master CSS Display Flex Property with Examples
6. 'display: grid'
- Enables CSS Grid layout.
- Powerful 2D layout system.
Code : 6 📝
<!DOCTYPE html>
<html>
<body>
<div style="display: grid; grid-template-columns: 1fr 1fr;">
<div style="background: lightblue;">Column 1</div>
<div style="background: lightcoral;">Column 2</div>
<div style="background: lightblue;">Column 3</div>
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Useful for creating complex layouts with rows and columns. Refer to our complete blog post on CSS Grid Layout Tutorial for Beginners | Complete Guide with Examples
7. 'display: table'
- Makes an element behave like a table.
- Used for custom table-like layouts.
Example 📄
display: table;
display: table-row;
display: table-cell;
We have covered display: table' and related values in a separate dedicated blog post.
Practical Tips
- Combine 'display' with 'position', 'margin', and 'width/height' for full control.
- 'display: flex' and 'grid' are widely used in modern responsive designs.
- Don't confuse 'visibility: hidden' (hides but takes space) with 'display: none'.
Conclusion
The 'display' property is your first step in creating layouts in CSS. It helps you define how elements appear and interact. From simple block vs inline behaviors to modern layouts using Flexbox and Grid, mastering 'display' is essential for every web developer.
Start small—experiment with block, inline, and inline-block. Then move to 'flex' and 'grid' for powerful, responsive layouts.
Suggested Topics:
- HTML Paragraph Tag Tutorial with Examples | HTML '<p>' Tag Explained
- HTML div and span Tag Explained with Examples - Complete Guide
- HTML '<label>' Tag Explained - Syntax, Attributes, and Examples
- CSS Margin Explained with Examples - Master Spacing in Web Design
- CSS Padding Explained with Examples | CSS Box Model Guide
- CSS background-color Tutorial with Examples - Learn Easily
Related Topics:
- CSS Flexbox Tutorial: Master CSS Display Flex Property with Examples
- CSS Grid Layout Tutorial for Beginners | Complete Guide with Examples
- CSS Display Table Property Explained with Examples | Learn Table Layout in CSS
- CSS Visibility Property Explained with Examples | Learn How Visibility Works in CSS
Frequently Asked Questions (FAQs)
What is the default display value of a '<div>'?
It's 'block'.
What is the difference between 'inline' and 'inline-block'?
'inline-block' allows setting width and height, unlike 'inline'.
How do I hide an element in CSS?
Use 'display: none' to hide it and remove it from layout.
Should I use Flexbox or Grid?
Use Flexbox for one-dimensional layouts, Grid for two-dimensional layouts.
Is 'display: none' SEO-friendly?
Yes, but overuse can lead to content being ignored by search engines.