The display property in CSS controls how an element appears. It is also important to how our HTML code is presented because it greatly affects layouts.
The arrangement of elements (div, anchor, heading, etc.) on a webpage is dictated by the Display attribute in CSS. True to its name, this attribute manages the presentation of different elements within a web page.
We need to make use of the display property prior to exploring the various functionalities and values offered by the contemporary Flexbox and Grid layout models. The significance of the display property in CSS plays a role in this aspect.
Let's begin by examining the different values associated with the display property.
Syntax for the Basic Display Property
element {
display: value;
}
CSS Display Property Values
In Cascading Style Sheets (CSS), there exist block-level elements and inline elements. The primary distinction lies in the fact that block elements start on a new line, whereas inline elements do not, occupying just a portion of the space that is available.
The appearance and layout of an element on a webpage are impacted by the various options available for the display property, such as inline, inline-block, block, table, and others. Moreover, the display property is essential for constructing both flexbox and grid layouts.
This specific display property can be employed to transform an inline element into a block, a block element into an inline, a combination of block and inline elements into an inline-block, and various other transformations.
Display Values for CSS
The following CSS display values are the most popular ones.
- display: inline;
- display: inline-block;
- display: block;
- display: run-in;
- display: none;
Display: inline
When an element's display attribute is specified as inline, the element will not initiate a new line and will expand to utilize the entire screen width while only taking up the necessary space it usually occupies.
Since inline display elements do not span the full width of the screen, it is not possible to define their width and height explicitly.
Some elements, including <span>, <a>, <i>, and <img>, are inline by default.
<!DOCTYPE html>
<html>
<head>
<title>Example for CSS Display property</title>
<style>
#mainblock {
height: 300px;
width: 200px;
background: pink;
display: inline;
}
#main1 {
height: 180px;
width: 180px;
background: lightblue;
display: inline;
}
#main2 {
height: 180px;
width: 180px;
background: light green;
display: inline;
}
.hi {
margin-left: 70px;
font-size: 42px;
font-weight: Italian;
color: red;
}
.hello {
font-size: 40px;
margin-left: 70px;
}
.main {
margin: 180px;
}
</style>
</head>
<body>
<div class="hi">Welcome</div>
<div class="hello">Let's get started</div>
<div class="mainblock">
<div id="mainblock"> Box 1 </div>
<div id="main1"> Box 2</div>
<div id="main2">Box 3 </div>
</div>
</body>
</html>
Output
Display: block
When the display attribute is configured as block, an element initiates on a fresh line and occupies the full width of the screen that is accessible.
For these items, we may set their width and height parameters. <div>, <section>, <p>, and many more elements are examples of elements that are by default at the block-level.
The span in the HTML snippet above will act as a block-level element when its display property is changed to block.
<!DOCTYPE html>
<html>
<head>
<title>Example of block Display Property</title>
<style>
#main1{
height: 50px;
width: 100px;
background: light pink;
display: block;
}
#main2{
height: 50px;
width: 100px;
background: lightblue;
display: block;
}
#main3 {
height: 50px;
width: 100px;
background: light green;
display: block;
}
.hi{
margin-left: 20px;
font-size: 42px;
font-weight: bold;
color: #009900;
}
.hello{
font-size: 25px;
margin-left: 30px;
}
.main {
margin: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="hi">Welcome</div>
<div class="hello">Let's get started </div>
<div class="main">
<div id="main1">Box 1</div>
<div id="main2">Box 2</div>
<div id="main3">Box 3</div>
</div>
</body>
</html>
Output
Display: inline-block
There is an inline-block display type along with block and inline displays.
An element that is assigned an inline-block display appears inline in the layout. Nevertheless, it offers the additional advantage of enabling you to set width and height properties, which is not possible when the element is set to display inline.
Therefore, the inline-block display property can be seen as a fusion of inline and block elements.
<!DOCTYPE html>
<html>
<head>
<title>Example of block Display Property</title>
<style>
#main1{
height: 50px;
width: 100px;
background: light pink;
display: inline-block;
}
#main2{
height: 50px;
width: 100px;
background: lightblue;
display: inline-block;
}
#main3 {
height: 50px;
width: 100px;
background: light green;
display: inline-block;
}
.hi{
margin-left: 20px;
font-size: 42px;
font-weight: bold;
color: blue;
}
.hello{
font-size: 25px;
margin-left: 30px;
}
.main {
margin: 20px;
text-align: left;
}
</style>
</head>
<body>
<div class="hi">Welcome</div>
<div class="hello">Let's get started </div>
<div class="main">
<div id="main1">Box 1</div>
<div id="main2">Box 2</div>
<div id="main3">Box 3</div>
</div>
</body>
</html>
Output
Display: none
When you assign the display property of an element to none, the element vanishes from the page without affecting the layout.
This also means that tools such as screen readers, which assist visually impaired individuals in navigating web content, will not have access to this component.
Not to be mistaken for using display: none, visibility: hidden also conceals the element but maintains the space where the element would normally be positioned as blank or unoccupied.
<!DOCTYPE html>
<html>
<head>
<title>Example of block Display Property</title>
<style>
#main1{
height: 50px;
width: 100px;
background: light pink;
display: none;
}
#main2{
height: 50px;
width: 100px;
background: lightblue;
display: inline-block;
}
#main3 {
height: 50px;
width: 100px;
background: light green;
display: none;
}
.hi{
margin-left: 20px;
font-size: 42px;
font-weight: bold;
color: blue;
}
.hello{
font-size: 25px;
margin-left: 30px;
}
.main {
margin: 20px;
text-align: left;
}
</style>
</head>
<body>
<div class="hi">Welcome</div>
<div class="hello">Let's get started </div>
<div class="main">
<div id="main1">Box 1</div>
<div id="main2">Box 2</div>
<div id="main3">Box 3</div>
</div>
</body>
</html>
Output
As illustrated below, using visibility hidden keeps the space occupied by the main element visible.
<!DOCTYPE html>
<html>
<head>
<title>Example of block Display Property</title>
<style>
#main1{
height: 50px;
width: 100px;
background: light pink;
display: inline-block;
}
#main2{
height: 50px;
width: 100px;
background: lightblue;
visibility: hidden;
}
#main3 {
height: 50px;
width: 100px;
background: light green;
display: block;
}
.hi{
margin-left: 20px;
font-size: 42px;
font-weight: bold;
color: blue;
}
.hello{
font-size: 25px;
margin-left: 30px;
}
.main {
margin: 20px;
text-align: left;
}
</style>
</head>
<body>
<div class="hi">Welcome</div>
<div class="hello">Let's get started </div>
<div class="main">
<div id="main1">Box 1</div>
<div id="main2">Box 2</div>
<div id="main3">Box 3</div>
</div>
</body>
</html>
Output