CSS Display

The CSS display property is used to define an HTML element that will display or not OR how an HTML element will be displayed. The display property plays a very important role in controlling web page content flow i.e. how content will be arranged like in multiple lines or a single line, the content will be displayed or not, all these things can be controlled by display property.

Display Property Types

According to the requirement of the CSS display, the property of display can be assigned by the values, and all values listed below:

• inline
• block
• none

NOTE: After understanding display value, let's discuss the visibility property because there is very little difference between display: none and visibility: hidden.

CSS display: inline;

An Inline element starts in a single line and it does not take any extra space means it's taking space only which is required to adjust that element. you can write display property like display: inline.

• For example of <ul><li></li></ul> elements. If there are multiple <li> elements within <ul> the all <li> will starts from new line, so if you want to display all <li> in single line then you have to use CSS property for <li> element display:inline.
• So, you can say that an inline element does not start on a new line and only takes up as much width as necessary.

Example of display: inline;

li {
     display: inline;
  }
Example with code →

CSS display: block

First of all, You have to understand what is a block. A Block is an area in an HTML page with maximum possible width. In HTML there are many block elements used, All elements occupy 100% width of their parent element's width.

To understand you can assume like if we create a hidden border of an HTML element which covers 100% width of its parent element, then such kind of element called as block-level elements.

The block element is always starting with a new line and takes a 100% width of the parent element's width.

• <div> - Element
• <p> - Element
• <header> - Element
• <section> - Element
• <footer> - Element
• <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> - Elements
• <ul> & <li> - Elements

These are listed elements dispaly:block, By default.

Example of display: block

.div {
     border: 2px solid red;
  }
Example with code →

CSS display: none;

In such a case, When you don't want to see an HTML element, then you can set the display value as none. After setting display: none the element is not going to display and it is not going to occupied space in webpage view.

• In general, use display: none with JavaScript to hide and show elements without deleting and recreating them.
• By default the script element uses display value as none

Example of display: none;

h3 {
     display: none; 
  }
Example with code →

NOTE: There is very little difference between display:none and visibility:hidden.

CSS visibility: hidden;

The visibility: hidden property also used to hide an HTML element after applying the value the element will be hidden but space which was occupied by the element, still will be there.

Example of visibility: hidden;

h3 {
     visibility: hidden; 
  }
Example with code →

Difference - display: none & visibility: hidden

The only difference between display: none and visibility: hidden is to display none does not take any place in the webpage but in case of visibility: hidden the HTML element will be hidden but occupied space still will be there.

Example: Display & Visibility

.dispaly_none_h3 {
     display: none; 
  }

.visibility_hidden_h3 {
     visibility: hidden; 
  }
Example with code →