Display Property
As the name suggests, the CSS display property defines how HTML elements are displayed on a web page. This property can be of great use when you want to change the usual behavior of an HTML element. Suppose, for some reason you want to swap the state of an inline element to that of a block-level element, then you can use this property to render this change.
Syntax
Here we have demonstrated some values of display property for your better understanding.
Inline Elements
Elements that consume only the required amount of space are called Inline Elements. They can also be referred as elements that are displayed in a line.These elements do not start from a new line, moreover, you can place multiple inline elements in the same line. Some examples are <span>, <a>, <img>, etc.
How to convert block-level elements to inline elements using display property
In this example we are creating three <div> elements and setting the value of the display property as “inline”, therefore, all of the <div> elements will be displayed in a single line and consume only the amount of required space.
#div1{
height: 200px;
width: 200px;
background: hotpink;
display: inline;
}
#div2{
height: 200px;
width: 200px;
background: cornflowerblue;
display: inline;
}
#div3{
height: 200px;
width: 200px;
background:goldenrod;
display: inline;
}
.div {
margin:50px;
}
</style>
Output
Although <div> element by default is a block-level element, but when you set the display property value to “inline” it will behave as an inline element.
Block-Level Elements
Elements that consume all the space available (from left to right), and start from a new line are regarded as Block Level Elements. Block level elements are capable of holding inline elements along with other block level elements. Majority of the elements in HTML are block level elements. Some examples are <div>, <ol>, <p>, etc.
How to convert inline elements to block-level elements using display property
For the sake of this example, we will consider two <button> elements and set the display property value to “block”. As a result both the <button> elements will consume the entire horizontal space, acting as block-level elements. Although <button> element by default is an inline element.
#button1{
padding: 10px 30px;
border: solid gray;
background: hotpink;
display: block;
}
#button2{
padding: 10px 30px;
border: solid gray;
background: cornflowerblue;
display: block;
}
</style>
Output
Flex Display
This value efficiently adjust items inside a container. It equally distributes the space amongst elements present in a container.
How does the flex value of display property works
In this example, we have illustrated the flex value of display property. We have created five <h2> elements inside a <div> element having class flex-container and we have assigned “flex” value to the display property of the <h2> elements.
.flex-container {
display: flex;
background-color: pink;
}
.flex-container > h2 {
background-color: skyblue;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
Output
Grid Display
The grid value of display property is useful when laying out elements in the form of a grid, moreover, when using grid there is no need to utilize floats and positioning.
How does the grid value of display property works
In the this example, we have created six <div> elements inside a bigger <div> element having class grid-container and we have assigned “grid” value to the display property of the <h2> elements
.grid-container {
display: grid;
background-color: hotpink;
padding: 10px;
}
#grid-item {
background-color: skyblue;
border: 1px solid gray;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
Output
There are a numerous other values that can be assigned to the display property which are as follows.
| Value | Description |
| inline | This value displays elements as inline elements. |
| block | This value displays elements as block-level elements. |
| contents | This value makes a container disappear. |
| flex | This value displays elements as block-level flex containers. |
| grid | This value displays elements as block-level grid containers. |
| inline-block | This value displays elements as inline-level block containers. |
| inline-flex | This value displays elements as inline-level flex containers. |
| inline-grid | This value displays elements as inline-level grid containers. |
| inline-table | This value displays inline-level tables. |
| list-item | This value displays all items in an <li> element. |
| run-in | This value on the basis of the context displays elements as either inline or block-level elements. |
| table | This value renders elements to behave like <table> elements. |
| table-caption | This value renders elements to behave like <caption> elements. |
| table-column-group | This value renders elements to behave like <column> element. |
| table-header-group | This value renders elements to behave like <header> element. |
| table-footer-group | This value renders elements to behave like <footer> element. |
| table-row-group | This value renders elements to behave like <row> element. |
| table-cell | This value renders elements to behave like <td> element. |
| table-column | This value renders elements to behave like <col> element. |
| table-row | This value renders elements to behave like <tr> element. |
| none | This value removes the entire element. |
| initial | This value displays the default value of the element. |
| inherit | This value lets an element inherit properties from its parent element. |
For better understanding, you can try some other values of display property to see how they work.
Conclusion
The CSS display property defines how HTML elements are displayed on a web page, moreover, using this property you can alter the default behavior of an HTML element, for instance, you can make an inline element behave as block-level element and vice versa. There is a vast range of values that you can apply to the display property, each with a different purpose. In this write-up, the display property is discussed in depth along with suitable examples.
