CSS Display property
Last Updated :
22 Mar, 2024
The Display property in CSS defines how the components(div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page.Â
Syntax:Â
display: value;
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Display property</title>
<style>
#geeks1 {
height: 100px;
width: 200px;
background: teal;
display: block;
}
#geeks2 {
height: 100px;
width: 200px;
background: cyan;
display: block;
}
#geeks3 {
height: 100px;
width: 200px;
background: green;
display: block;
}
.gfg {
margin-left: 20px;
font-size: 42px;
font-weight: bold;
color: #009900;
}
.geeks {
font-size: 25px;
margin-left: 30px;
}
.main {
margin: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">display: block; property</div>
<div class="main">
<div id="geeks1">Block 1</div>
<div id="geeks2">Block 2</div>
<div id="geeks3">Block 3</div>
</div>
</body>
</html>
CSS Display property Examples
1. Using Display Block
This property is used as the default property of div. This property places the div one after another vertically. The height and width of the div can be changed using the block property if the width is not mentioned, then the div under the block property will take up the width of the container.
Example: Use the given CSS in above example.
#geeks1 {
background: teal;
display: block;
}
#geeks2 {
background: cyan;
display: block;
}
#geeks3 {
background: green;
display: block;
}
Output:Â
2. Using Inline Display
This property is the default property of anchor tags. This is used to place the div inline i.e. in a horizontal manner. The inline display property ignores the height and the width set by the user.Â
Example:Â Use the given CSS in above example.
#geeks1 {
background: teal;
display: inline;
}
#geeks2 {
background: cyan;
display: inline;
}
#geeks3 {
background: green;
display: inline;
}
Output:Â
3. Using Display Inline-block
This features uses the both properties mentioned above, block and inline. So, this property aligns the div inline but the difference is it can edit the height and the width of block. Basically, this will align the div both in block and inline fashion.
Example: Use the given CSS in above example.
#geeks1
{
background: teal;
display: inline-block;
}
#geeks2 {
background: cyan;
display: inline-block;
}
#geeks3 {
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.Â
#geeks2 {
background: cyan;
display: none;
}
Output:Â Display none property on block 2
Supported Browsers:
The browsers supported by the Display property are listed below:Â
- Google Chrome
- Edge
- Firefox
- Opera
- Safari
Share your thoughts in the comments
Please Login to comment...