The display CSS property
Posted By: Kanika Gupta Published: 14, Jan 2024
The display property in CSS is used to specify the display behavior of any element which means that it specifies how an element can be displayed. It is one of the most important properties in CSS.
Consider every element specified on a web page as an individual rectangle box. Now, the use of display is to define the layout of these boxes. Note that this property defines exactly how an element is to be displayed. By default, the value is inline for all elements.
Values of the display property
A few common parameters/values used for this property are listed below.
- none
- inline
- block
- inline-block
- flex
- grid
Syntax
- display: none;
- display: inline;
- display: block;
- display: inline-block;
- display: flex;
- display: grid;
1. display: none;
This property is used to hide an element without actually deleting it. The element will be completely removed from the page and the page will be displayed as if the element was never present or used there.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1.ex1 {
display: none;
}
</style>
</head>
<body>
<h1>Example of display none</h1>
<h1 class="ex1">This is a hidden heading</h1>
</body>
</html>
Output:
2. display: inline;
This property displays an element as an inline element i.e. the specified elements do not start on a new line; instead they get placed in a line and take up the necessary width of that page. No height and width property will be applicable when the inline value of the display is in effect.
Example:
Output:<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>Display a list as inline:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>JQUERY</li>
</ul>
</body>
</html>
3. display: block
This property is used to display elements in a block. The elements under block property always start on a new line and they stretch to the full width of the web page available. By default (without setting a width) they take up as much horizontal space as they can.
Example:
Output:<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color:red;
display:block;
}
</style>
</head>
<body>
<p>Block element: to cover the full width of the web page. This property works end-to-end on any element. </p>
</body>
</html>
4. display: inline-block
This property is highly similar to inline property. The difference is such that the elements can be placed side by side as it does not add a line breaker after every element. Moreover, the height, width, padding, and margins of an element are well-respected.
Example:
By default, the list elements are displayed
vertically. Here, inline-block is used to display them horizontally with the
defined paddings.
Output:<!DOCTYPE html>
<html>
<head>
<style>
.menu {
background-color: red;
color:black;
list-style-type: none;
text-align:center;
}
.menu li {
display:inline-block;
padding:20px;
}
</style>
</head>
<body>
<ul class="menu">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>BOOTSTRAP</li>
</ul>
</body>
</html>
5. display: flex
This property is mainly used to make an element structure responsive and is easier to use for it does not require any float or positioning the property to be specified. It allows the user to create different layouts for different screen sizes of the same elements.
Example:
Output:<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing:border-box;
}
.container {
display:flex;
flex-wrap:wrap;
font-size:30px;
text-align:center;
}
.flex-left {
padding:5px;
flex: 50%;
}
.flex-right {
padding:5px;
flex: 50%;
}
@media (max-width: 500px) {
.flex-right, .flex-left {
flex:100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="flex-left">Item 1</div>
<div class="flex-right">Item 2</div>
</div>
</body>
</html>
For screen size below 500
For screen size above 500
6. Display: grid
As the name suggests, the elements specified under this property are aligned in a grid layout. The user defines a grid container which consists of the grid items that are placed in the defined rows and columns.
One can define the height, width, number of rows and columns, their sizes as well as grid back between the rows and columns under this property.
Example:
Output:<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 5px;
background-color: blue;
padding: 10px;
}
.grid-container >
div {
background-color: pink;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div>HTML</div>
<div>CSS</div>
<div>JS</div>
<div>AJAX</div>
<div>JQUERY</div>
<div>BOOTSTRAP</div>
<div>NODEJS</div>
<div>REACT</div>
</div>
</body>
</html>
.svg?1=&directory=catalog){kind=icon}
Guiding your business journey