The display property of an element is responsible for its layout and rendering on the browser. This particular setting defines how the element will look which includes not being visible at all. By default all the elements have inline as default display.
Let us discuss about some other useful display options web developers have.
1. inline - If any property is not specified, inline always acts as default. It simply creates a box, which is as close as possible to the actual rendering area. It doesn’t really matter what are the dimensions of parent element as it inline does not take that into account. You cannot specify the height and width of the element. But yes margin and padding works in horizontal direction but not in vertical direction. For example:
<h2 style='display:inline'>Hello World</h2>
Would look like this:
2. inline-block - It is almost similar to inline, the difference being that width and height can be specified. For example:
<h2 style='display:inline-block;width:120px;height:200px'>Hello World</h2>
Would look like this:
3. block - Elements such as div, p,h1 and with HTML5 elements like header, section areblock by default. block elements tend to acquire the width of the parent element. So basically, it takes as much as horizontal space which is available to it. For example, elements declared after a heading with h# tag always come below it. This is due to the width:100% which they have due toblock display. For example:
<h2 style='display:block'>Hello World</h2>
Would look like this:
4. none - When this property is assigned to display, browser considers that the element doesn’t exist in DOM. This means it’s invisible and doesn’t take any space nor leave any vacant unoccupied space. Although, it can be referred by Javascript. Changing the property to block or inline will make it visible once again.
5. table - These are rarely used. We have a list of them which can help you build a table from divbut once again, they are rarely used or not used at all. They are self explanatory about the properties and I think directly using a table will make more sense. display: table display: table-cell display: table-column display: table-column-group display: table-footer-group display: table-header-group display: table-row display: table-row-group
6. list-item - This has also got nothing so special except that the element starts behaving as if it is<li></li>.
With only block, none and inline being significantly used, other display properties are losing usage with time. I hope you enjoyed reading this. To test things, simply move on to inspect-element in Google Chrome and try changing display property of various elements, specially h# tags. For more info and documentation, check Mozilla Documentation.
