CSS Display
The CSS Display property is the most used property that controls the layout of the HTML elements. This property specifies how the HTML elements are going to display on a web page.
The web page considered every HTML element (div, p, heading) as a rectangular box and the CSS display property helps to set out the positioning of these boxes.
Syntax of CSS display property
display: value;
CSS Display values
There are several values of the CSS display property, out of which the most used are given below:
- inline
- none
- block
- inline-block
CSS inline value
The inline display value sets out the elements as an inline element which means the elements are place side by side or within a line (horizontally). This property provides only as much space as any elements need. The height, width, top-bottom margin property are not accepted by the HTML element whenever the display: inline property is specified for that element.
Syntax of the CSS inline value
display: inline;
Example : Specifying CSS inline value
In the given example, we have created 4 <div> elements. Generally, the content of these 4 <div> elements is display vertically on the web page and also accepts the given height and width. But, we have applied the CSS display: inline property to the <div> element so the content of this <div> element displayed side by side and takes only as much height and width as it needed.
<!DOCTYPE html>
<html>
<head>
<title>CSS Display Property</title>
<style>
div {
display: inline;
height: 120px;
width: 100px;
color: white;
background-color: black;
}
</style>
</head>
<body>
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
<div>Box 4</div>
</body>
</html>
Output:
As we can see in the output that the boxes are placed side by side and taking the amount of space they needed.
CSS none value
The CSS display none value removes the HTML element and also does not display any blank space at the place of the removed element. The removed elements exist in an HTML structure but not be display on a web page.
Syntax of the CSS none value
display: none;
Example: Specifying CSS none value
In the given example, we have created the four boxes with the help of <div> element. We have removed the second box by applying the CSS display: none property. So, when we run the given code the second box will not be displayed on the web page but it exists in the HTML structure.
<!DOCTYPE html>
<html>
<head>
<title>CSS Display Property</title>
<style>
.class1 {
height: 120px;
width: 100px;
color: black;
font-size: 18px;
text-align: center;
}
.class2{
display: none;
}
</style>
</head>
<body>
<div class="class1" style="background-color: #6ddef7;">Box 1</div>
<div class="class2">Box 2</div>
<div class="class1" style="background-color: #8bf7e3;">Box 3</div>
<div class="class1" style="background-color: #719deb;">Box 4</div>
</body>
</html>
Output
CSS block value
The CSS display block values take up the full width of the screen. These values place the content of each element in a new line and allow them to act as a separate block. There are some HTML elements whose default display value is block these elements are <div>, <p>, <ul>, etc.
Note: The user can set the height and width of the block according to their need.
Syntax of CSS block value
display: block;
Example: Specifying CSS block value
In the given example, we have created the 3 boxes using the <span> element and set out the CSS property display: block;. The default display value of the <span> element is inline and the box that we created with the help of this, displayed side by side and taking up only the required height and width. But we have set the display: block property along with its height and width. So, this makes each block display in a separate line.
<!DOCTYPE html>
<html>
<head>
<title>CSS Display Property</title>
<style>
span {
display: block;
color: black;
font-size: 18px;
height: 150px;
width: 200px;
text-align: center;
}
</style>
</head>
<body>
<span style="background-color: #6ddef7;">Box 1</span>
<span style="background-color: #8bf7e3;">Box 2</span>
<span style="background-color: #719deb;">Box 3</span>
</body>
</html>
Output
CSS inline-block value
The inline-block offers the property of both the values inline and block. This value is used whenever we want to place our content side by side (inline) and also want to set the height, width, and margins of the element.
Syntax of CSS inline-block value
display: inline-block;
Example: Specifying CSS inline-block value
In the given example, we have created three boxes using the <div> element. The default layout of this is in a vertical manner because the default display value of the <div> element is block. Then, we specified the display: inline-block because of this property the layout consists of the properties of both the values inline and block. The blocks of this layout are placed side by side (inline) and also accept the values of height and width.
Other display values
| S. No |
Value |
Description |
| 1. |
flex |
This value displays the element as a block-level flex container. |
| 2. |
inline-flex |
This value displays an element as an inline-level flex container. |
| 3. |
grid |
This value displays an element as a block-level grid container. |
| 4. |
inline-grid |
This value displays an element as an inline-level grid container. |
| 5. |
inline-table |
This value displays the element as an inline-level table. |
| 6. |
list-item |
This value makes an element behave as an <li> element. |
| 7. |
run-in |
This value displays as an element either in block or inline layout. |
| 8. |
table |
This value allows the element to behave like a table element. |
| 9. |
table-caption |
The value allows the element to behave as an <caption> element. |
| 10. |
table-column-group |
This value allows the element to behave as an <colgroup> element. |
| 11. |
table-header-group |
This value allows the element to behave as an <thead> element. |
| 12. |
table-footer-group |
This value allows the element to behave as an <tfoot> element. |
| 13. |
initial |
This value sets the default properties of the element and does not accept the other CSS properties. |
| 14. |
inherit |
This value allows the element to inherit the properties of their parent element. |
Conclusion
In this lesson, we have learned about the CSS display property and how it works. Also, we have learned about the values of the display property and how each value can change the layout differently. The values are given below:
- inline
- none
- block
- inline-block
