CSS Display property
The display property in CSS plays a important role in shaping the layout of web pages. You can create flexible and responsive designs by understanding their behaviour and using them effectively. It specifies an element’s display behaviour (the type of rendering box). It defines how an element is rendered in the layout, determining its positioning and interaction within the document’s flow and structure.
Syntax:
display: value;
Display Property Values:
| Value | Description |
|---|---|
| inline | It is used to display an element as an inline element. |
| block | It is used to display an element as a block element |
| contents | It is used to disappear the container. |
| flex | It is used to display an element as a block-level flex container. |
| grid | It is used to display an element as a block-level grid container. |
| inline-block | It is used to display an element as an inline-level block container. |
| inline-flex | It is used to display an element as an inline-level flex container. |
| inline-grid | It is used to display an element as an inline-level grid container. |
| inline-table | It is used to display an inline-level table |
| list-item | It is used to display all the elements in <li> element. |
| run-in | It is used to display an element inline or block level, depending on the context. |
| table | It is used to set the behavior as <table> for all elements. |
| table-caption | It is used to set the behavior as <caption> for all elements. |
| table-column-group | It is used to set the behavior as <column> for all elements. |
| table-header-group | It is used to set the behavior as <header> for all elements. |
| table-footer-group | It is used to set the behavior as <footer> for all elements. |
| table-row-group | It is used to set the behavior as <row> for all elements. |
| table-cell | It is used to set the behavior as <td> for all elements. |
| table-column | It is used to set the behavior as <col> for all elements. |
| table-row | It is used to set the behavior as <tr> for all elements. |
| none | It is used to remove the element. |
| initial | It is used to set the default value. |
| inherit | It is used to inherit property from its parents’ elements. |
Example : This example uses 3 divs to demonstrate the CSS display property.
<!DOCTYPE html>
<html>
<head>
<title>CSS Display property</title>
<style>
#Beginner1 {
height: 100px;
width: 200px;
background: teal;
display: block;
}
#Beginner2 {
height: 100px;
width: 200px;
background: cyan;
display: block;
}
#Beginner3 {
height: 100px;
width: 200px;
background: green;
display: block;
}
.gfg {
margin-left: 20px;
font-size: 42px;
font-weight: bold;
color: #009900;
}
.Beginner {
font-size: 25px;
margin-left: 30px;
}
.main {
margin: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div class="Beginner">display: block; property</div>
<div class="main">
<div id="Beginner1">Block 1</div>
<div id="Beginner2">Block 2</div>
<div id="Beginner3">Block 3</div>
</div>
</body>
</html>
Understanding the Display Property
The display property defines how an HTML element should be displayed. It controls the box type generated by an element, affecting its positioning and behavior within the document flow. Let’s dive into the key values:
1. Using Display Block
This is the default property for <div> elements. It places them vertically, one after another. You can adjust the height and width of a block-level element.
Example: Use the given CSS in above example.
#Beginner1 {
background: teal;
display: block;
}
#Beginner2 {
background: cyan;
display: block;
}
#Beginner3 {
background: green;
display: block;
}
Output:
2. Using Inline Display
Use this property to display an element inline. It doesn’t start a new line and respects the content flow.
Example: Use the given CSS in above example.
#Beginner1 {
background: teal;
display: inline;
}
#Beginner2 {
background: cyan;
display: inline;
}
#Beginner3 {
background: green;
display: inline;
}
Output:
3. Using Display Inline-block
Combining characteristics of both block and inline, this value allows elements to flow inline while still having block-level properties. It’s useful for creating responsive layouts.
Example: Use the given CSS in above example.
#Beginner1
{
background: teal;
display: inline-block;
}
#Beginner2 {
background: cyan;
display: inline-block;
}
#Beginner3 {
background: green;
display: inline-block;
}
Output:
4. Using Display None:
This property hides the div or the container which use this property. Using it on one of the div it will make working clear.
Example: Use the given CSS in above example.
#Beginner2 {
background: cyan;
display: none;
}
Output: Display none property on block 2
5. Using display flex and display grid:
These values introduce powerful layout options. Flexbox (display: flex) enables flexible, one-dimensional layouts, while CSS Grid (display: grid) provides two-dimensional grid-based layouts.
Supported Browsers:
The browsers supported by the Display property are listed below:
Contact Us