CSS Display
The CSS display property is applied to manage the layout of an element. It specifies how an HTML element must be displayed on the webpage.
Following are some typical values for the display property:
Display Inline
The inline value enables the element to behave as an inline element. It occupies only as much space as it requires.
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Display
</title>
</head>
<body>
<div
class="element1">Element1</div>
<div
class="element2">Element2</div>
<div
class="element3">Element3</div>
</body>
</html>
CSS
.element1
{
display: inline;
background-color: aqua;
}
.element2
{
display: inline;
background-color: yellow;
}
.element3
{
display: inline;
background-color: green;
}
Output
Display Block
The block value makes the element act as a block-level element. It occupies the full width of space in the webpage.
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Display
</title>
</head>
<body>
<div
class="element1">Element1</div>
<div
class="element2">Element2</div>
<div
class="element3">Element3</div>
</body>
</html>
CSS
.element1
{
display: block;
background-color: aqua;
height: 100px;
width: 300px;
}
.element2
{
display: block;
background-color: yellow;
height: 100px;
width: 300px;
}
.element3
{
display: block;
background-color: green;
height: 100px;
width: 300px;
}
Output
Display Inline Block
The inline-block property is a mix of both inline and block properties. It accommodates width and height as a block-level element but flows as an inline-level element.
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Display
</title>
</head>
<body>
<div
class="element1">Element1</div>
<div
class="element2">Element2</div>
<div
class="element3">Element3</div>
</body>
</html>
CSS
.element1
{
display: inline-block;
background-color: aqua;
height: 100px;
width: 100px;
}
.element2
{
display: inline-block;
background-color: yellow;
height: 100px;
width: 100px;
}
.element3
{
display: inline-block;
background-color: green;
height: 100px;
width: 100px;
}
Output
Display None
The none value makes the element invisible on the page. The element is not shown and does not take up any space.
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Display
</title>
</head>
<body>
<div
class="element1">Element1</div>
<div
class="element2">Element2</div>
<div
class="element3">Element3</div>
</body>
</html>
CSS
.element1
{
display: block;
background-color: aqua;
height: 100px;
width: 200px;
}
.element2
{
display: none;
background-color: yellow;
}
.element3
{
display: block;
background-color: green;
height: 100px;
width: 200px;
}
Output
