Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps!
We spend hours scrolling social media and waste money on things we forget, but won’t spend 30 minutes a day earning certifications that can change our lives.
Master in DevOps, SRE, DevSecOps & MLOps by DevOps School!
Learn from Guru Rajesh Kumar and double your salary in just one year.
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