Display Property in CSS

Written By:-Avinash Malhotra

Our Website:- Tech Altum

Display Means how an element is displayed.

Common display properties will be
1, Display Block.
2, Display Inline.
3, Display None

1. Display Block
 Display Block Shows all elements as a block elements.

For example,
 suppose we create a UL like this
<ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
</ul>
 the result will be like,

• Item 1
• Item 2
• Item 3
• Item 4

Now we write css of above ul,
ul  li{ display:block}, now the result will be like this,

• Item 1
• Item 2
• Item 3
• Item 4

Li's are behaving like a block 2. Display Inline
Display Inline shows all elements as Inline elements.
To know what are inline elements, click here

For example,
 suppose we create a UL like this
<ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
</ul>
 the result will be like,

• Item 1
• Item 2
• Item 3
• Item 4

Now we write css of above ul,
ul  li{ display:inline}, now the result will be like this,

• Item 1
• Item 2
• Item 3
• Item 4

• Li's are behaving like inline elements

3. Display None
Display none will complete hide the element on the browser screen, but element will remain on page. Simply it will become invisible.
However we can change the display on hover, like in CSS Drop Menu.