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
