Post
Ask Question

Display Property Of CSS

Introduction

 
We can assign one of four possible values for the CSS Display property, which are:
  1. Display: None
  2. Display: Inline
  3. Display: Inline Block
  4. 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:
  1. <style>  
  2.     .red  
  3.     {  
  4.         background: red;  
  5.         height: 100px;  
  6.         width: 100px;  
  7.         display: inline;  
  8.     }  
  9.      
  10.     .green  
  11.     {  
  12.         background: green;  
  13.         height: 100px;  
  14.         width: 100px;  
  15.         display: none;  
  16.     }  
  17. </style>  
  18. <body>  
  19.     <div class="red">  
  20.         textarea textarea textarea</div>  
  21.     <div class="green">  
  22.         textarea textarea textarea</div>  
  23. </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
  1. <style>  
  2.     .red  
  3.     {  
  4.         background: red;  
  5.         height: 100px;  
  6.         width: 100px;  
  7.         display: inline;  
  8.     }  
  9.      
  10.     .green  
  11.     {  
  12.         background: green;  
  13.         height: 100px;  
  14.         width: 100px;  
  15.         display: inline;  
  16.     }  
  17. </style>  
  18. <body>  
  19.     <div class="red">  
  20.         textarea textarea textarea</div>  
  21.     <div class="green">  
  22.         textarea textarea textarea</div>  
  23. </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 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
  1. <style>  
  2.     .red  
  3.     {  
  4.         background: red;  
  5.         height: 100px;  
  6.         width: 100px;  
  7.         display: inline-block;  
  8.     }  
  9.      
  10.     .green  
  11.     {  
  12.         background: green;  
  13.         height: 100px;  
  14.         width: 100px;  
  15.         display: inline-block;  
  16.     }  
  17. </style>  
  18. <body>  
  19.     <div class="red">  
  20.     </div>  
  21.     <div class="green">  
  22.     </div>  
  23. </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
  1. <style>  
  2.     .red  
  3.     {  
  4.         background: red;  
  5.         height: 100px;  
  6.         width: 100px;  
  7.     }  
  8.      
  9.     .green  
  10.     {  
  11.         background: green;  
  12.         height: 100px;  
  13.         width: 100px;  
  14.     }  
  15. </style>  
  16. <body>  
  17.     <div class="red">  
  18.     </div>  
  19.     <div class="green">  
  20.     </div>  
  21. </body> 
Output
 
d-block.png
 
Div is a block element so it covers horizontal space of its parent element.


Similar Articles