CSS Display Block

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 placement of the components (div, hyperlink, header, etc.) on the webpage is determined by the Display property in CSS. As its name implies, this property controls how the various components of a web page are shown.

We must utilize the display property before accessing the modern Flexbox and Grid model's many features and values. The importance of the display property in CSS can be attributed in part to this.

Let's get started by exploring the show property's various values.

Syntax for the Basic Display Property

element {
        display: value;
     }

CSS Display Property Values

In CSS, there are block-level elements and inline elements. The main difference between the two is that the block elements begin on a new line, whereas inline elements do not, taking up only a portion of the available space.

The style and presentation of an element on a website are influenced by the display property's numerous possible values, which include inline, inline-block, block, table, and more. Additionally, you must use the display property to build the flex and grid layouts.

fThis display property may be used to convert an inline element to a block, a block element to an inline, a block and inline element to an inline-block, and many other things.

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 property is set to inline, the element will not begin on a new line and will use the whole available screen space. It just occupies the space that such an element would typically occupy.

Because it does not occupy the entire screen width, elements with inline displays cannot have their width and height specified.

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 property is set to block, an element begins on a new line and takes up the entire available screen width.

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 from the preceding HTML code will behave like a block-level element if we set it to block display.

<!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 in addition to a block and inline display.

An element you give an inline-block display to is inline by the presentation. However, it has the extra benefit of allowing you to apply width and height, which you are unable to do when the element has an inline display given to it.

Thus, the inline-block display may be viewed as combining 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 set an element's display property to none, the element disappears from the page without impacting the layout.

This also implies that software like screen readers, which enable blind people to view webpages, won't be able to access the element.

Not to be confused with display: none with visibility: hidden. The latter also hides the element but leaves the area that the element would typically occupy vacant or empty.

<!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 you can see below, visibility hidden leaves the area filled by the main element open.

<!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