Introduction
We can assign one of four possible values for the CSS Display property, which are:
- Display: None
- Display: Inline
- Display: Inline Block
- Display: Block
Step 1
Display: None
A "None" value for the display property does not display the element. That might sound pretty useless but it can be used for good effect with accessibility considerations, alternate style sheets or advanced hover effects.
Example
If we specify display none to the div class "green" then it will not be visible, as in the following:
<style>
.red
{
background: red;
height: 100px;
width: 100px;
display: inline;
}
.green
{
background: green;
height: 100px;
width: 100px;
display: none;
}
</style>
<body>
<div class="red">
textarea textarea textarea</div>
<div class="green">
textarea textarea textarea</div>
</body>
Output
![d-none.png]()
Step 2
Display: Inline
An "Inline" value for the display property does just what it says; the elements that are displayed inline follow the flow of a line. Strong, anchor, span and emphasis elements are traditionally displayed inline. If we specify the value inline to a block element then it will behave like an inline element.
Example
<style>
.red
{
background: red;
height: 100px;
width: 100px;
display: inline;
}
.green
{
background: green;
height: 100px;
width: 100px;
display: inline;
}
</style>
<body>
<div class="red">
textarea textarea textarea</div>
<div class="green">
textarea textarea textarea</div>
</body>
Output
![d-inln.png]()
Div (a block element) behaves like an inline element as the display value inline is given to it.
Note: CSS height and width properties does not work for an inline element.
Step 3
Display: Inline-Block
Basically, it's a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and padding etc. We can provide an inline-block value for an inline element also.
Example
<style>
.red
{
background: red;
height: 100px;
width: 100px;
display: inline-block;
}
.green
{
background: green;
height: 100px;
width: 100px;
display: inline-block;
}
</style>
<body>
<div class="red">
</div>
<div class="green">
</div>
</body>
Output
![d-inblock.png]()
After giving it an inline-block value for the display property to the div, we will see both div in the same line.
Step 4
Display: Block
Puts a line break before and after the element. Header, Div and paragraph etc. elements are examples of elements that are traditionally displayed in a block format.
Example
<style>
.red
{
background: red;
height: 100px;
width: 100px;
}
.green
{
background: green;
height: 100px;
width: 100px;
}
</style>
<body>
<div class="red">
</div>
<div class="green">
</div>
</body>
Output
![d-block.png]()
Div is a block element so it covers horizontal space of its parent element.