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 property defines the behavior of that rectangular box.
CSS Display default properties
CSS display values
There are following CSS display values which are commonly used.
1) CSS display inline
The inline element takes the required width only. It doesn't force the line break so the flow of text doesn't break in inline example.
The inline elements are:
Let's see an example of CSS display inline.Test it Now
Hello Javatpoint.com Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.
2) CSS 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.Test it Now
3) CSS display block
The CSS display block element takes as much as horizontal space as they can. Means the block element takes the full available width. They make a line break before and after them.Test it Now
4) CSS display run-in
This property doesn't work in Mozilla Firefox. These elements don't produce a specific box by themselves.
5) CSS display none
The "none" value totally removes the element from the page. It will not take any space.Test it Now
This heading is visible.
You can see that the hidden heading does not contain any space.
Other CSS display values