Display Property Of CSS

Preeti Zutshi

6y15k11100Article

JavaScript CSSDisplay BlockDisplay InlineDisplay Inline BlockDisplay None

11 Comments

Join the conversation! Your thoughts help the community grow.

Amar Bisht12y ago
nice.!
Amit Tripathi12y ago
Nice Article ..
Sanjay Singh12y ago
nice explanation ..
Gopi Chand12y ago
Good job Preeti...
AKBAR AKI13y ago
nice
Mudita Rathore13y ago
nice article preeti. keep it up
Preeti Zutshi13y ago
Thanks all of you................
Former member13y ago
Nice article Preeti. However I believe you should have given more information about Display property in introduction /DJ
Rohatash Kumar13y ago
Good explained article. keep it up. Preeti
jignesh bhalu13y ago
tank you pretty. it is very use full css article..
Mahesh Chand13y ago
Welcome back Preeti. Nice to see young people are inspiring others. Cheers!

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

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

Div (a block element) behaves like an inline element as the display value inline is given to it.

Note: CSS height and width properties do 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

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

Div is a block element so it covers horizontal space of its parent element.