The CSS display property is used to control how an HTML element is displayed or rendered in the web page
layout. It determines the type of box that an element generates and how it interacts with other elements in
the document flow. The display property allows you to change the default behavior of HTML elements to
achieve specific layout and design goals.
- display:block;:
- display:inline;:
- display:inline-block;:
- display:none;:
- display:flex;:
- display:grid;:
- 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:
<html>
<head>
<style>
.b1 {
display: block;
width: 200px;
height: 100px;
background-color: #3498db;
}
.b2 {
display: block;
width: 200px;
height: 100px;
background-color: teal;
}
.b3 {
display: block;
width: 200px;
height: 100px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="b1">Block Element</div>
<div class="b2">Block Element one</div>
<div class="b3">Block Element two</div>
</body>
</html>
Output:
Block Element
Block Element one
Block Element two
- display:inline;:
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:
<html>
<head>
<style>
.abc {
display: inline;
width: 200px;
height: 100px;
background-color: #3498db;
}
.pqr {
display: inline;
width: 200px;
height: 100px;
background-color: teal;
}
.xyz {
display: inline;
width: 200px;
height: 100px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="abc">Block Element</div>
<div class="pqr">Block Element one</div>
<div class="xyz">Block Element two</div>
</body>
</html>
Output:
Block Element
Block Element one
Block Element two
- 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:
<html>
<head>
<style>
.block-element {
display: inline-block;
width: 200px;
height: 100px;
background-color: #3498db;
}
.block {
display: inline-block;
width: 200px;
height: 100px;
background-color: teal;
}
.element {
display: inline-block;
width: 200px;
height: 100px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="block-element">Block Element</div>
<div class="block">Block Element one</div>
<div class="element">Block Element two</div>
</body>
</html>
Output:
Block Element
Block Element one
Block Element two
- 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.
<html>
<head>
<style>
.a1 {
display: block;
width: 200px;
height: 100px;
background-color: #3498db;
}
.a2 {
display: none;
width: 200px;
height: 100px;
background-color: teal;
}
.a3 {
display: block;
width: 200px;
height: 100px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="a1">Block Element</div>
<div class="a2">Block Element one</div>
<div class="a3">Block Element two</div>
</body>
</html>
Output:
Block Element
Block Element one
Block Element two
- display:flex;:
The flex CSS shorthand property is the combination of flex-grow, flex-shrink, and flex-basis properties.
It is used to set the length of flexible items. The flex property is much more responsive and
mobile-friendly. It is easy to position child elements and the main container. The margin doesn’t collapse
with the content margins. The order of any element can be easily changed without editing the HTML
section.
Example:
<html>
<head>
<style>
.flex-container {
display: flex;
}
.flex-item {
flex: 1;
background-color:blanchedalmond;
padding: 10px;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
Output:
- display:grid:;
The CSS grid layout module is used to create a grid-based layout system, with the help of rows and
columns it makes it easier to design any webpage without using floats and positioning.
Example:
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
</body>
</html>
Output:
