CSS display is the most important property of CSS which is used to control the layout of the element. It specifies how the element is displayed.

Every element has a default display value according to its nature. Every element on the webpage is a rectangular box and the CSS

syntax

display:value;  

There are following CSS display values which are commonly used.

• display: inline; => The inline element takes the required width only.
• display: inline-block; =>The CSS display inline-block element is very similar to inline element but the difference is that you are able to set the width and height.
• display: block; =>The CSS display block element takes as much as horizontal space as they can.
• display: run-in; => If the run-in box contains a bock box, it will be same as block.If the block box follows the run-in box, the run-in box becomes the first inline box of the block box.
• display: none; => The “none” value totally removes the element from the page. It will not take any space.

Example

<!DOCTYPE html>  

<html>  

<head>  

<style>  

p {  

display: block; 
  
}  

</style>  

</head>  

<body>  

<p>display property</p> 
 
<p>inline</p>  

<p>block</p>
  
<p>inline-block</p>  

<p>none</p>
  
</body> 
 
</html>  

output

display property

inline

block

inline-block

none