Investigating CSS Attribute 'Display'

Click to view W3schools CSS display Property

CSS display Property Complete CSS Reference


Use of some different display values:

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

display: value;
Property Values
Value Description Play it
inline Displays an element as an inline element (like <span>>. Any height and width properties will have no effect Click
block Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width Click
contents Makes the container disappear, making the child elements children of the element the next level up in the DOM Click
flex Displays an element as a block-level grid container Click
grid Displays an element as a block-level grid container Click
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values Click
inline-flex Displays an element as an inline-level flex container Click
inline-grid Displays an element as an inline-level grid container Click
inline-table The element is displayed as an inline-level table Click
list-item Let the element behave like a <li> element Click
run-in Displays an element as either block or inline, depending on context Click
table Let the element behave like a <table> element Click
table-caption Let the element behave like a <caption> element Click
table-column-group Let the element behave like a <colgroup> element Click
table-header-group Let the element behave like a <thead> element Click
table-footer-group Let the element behave like a <tfoot> element Click
table-row-group Let the element behave like a <tbody> element Click
table-cell Let the element behave like a <td> element Click
table-column Let the element behave like a <col> element Click
table-row Let the element behave like a <tr> element Click
none The element is completely removed Click
initial Sets this property to its default value. Read about initial Click
inherit Inherits this property from its parent element. Read about inherit

A demonstration of how to use the contents property value. In the following example the .a container will disappear, and making the child elements (.b) children of the element the next level up in the DOM:

.a {
	display: contents;
	border: 2px solid red;
	background-color: #ccc;
	padding: 10px;
	width: 200px;
}

.b {
    border: 2px solid blue;
    background-color: lightblue;
    padding: 10px;
}
Click to view details

A demonstration of how to use the inherit property value: 

body 	{
    display: inline;
}

p {
    display: inherit;
}
Click to view details