revision:
- specifies the display behavior (the type of rendering box) of an element.
In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.
Property values:
inline : displays an element as an inline element (like <span>). Any height and width properties will have no effect
block : displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
contents : makes the container disappear, making the child elements children of the element the next level up in the DOM
flex : displays an element as a block-level flex container
grid : displays an element as a block-level grid container
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
inline-flex : displays an element as an inline-level flex container
inline-grid : displays an element as an inline-level grid container
inline-table : the element is displayed as an inline-level table
list-item : let the element behave like a <li> element
run-in : displays an element as either block or inline, depending on context
table : let the element behave like a <table> element
table-caption : let the element behave like a <caption> element
table-column-group : let the element behave like a <colgroup> element
table-header-group : let the element behave like a <thead> element
table-footer-group : let the element behave like a <tfoot> element
table-row-group : let the element behave like a <tbody> element
table-cell : let the element behave like a <td> element
table-column : let the element behave like a <col> element
table-row : let the element behave like a <tr> element
none : the element is completely removed
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
HELLO WORLD!
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.HELLO WORLD!
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.HELLO WORLD!
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.HELLO WORLD!
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.These two paragraphs generates inline boxes, and it results in
no distance between the two elements.
<div>
<h4>display: none:</h4>
<div id=""Div-1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
at pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p> Vestibulum volutpat tellus
diam, consequat gravida libero rhoncus ut.
</div>
<h4>display: inline:</h4>
<div id="Div-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
at pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p> Vestibulum volutpat tellus
diam, consequat gravida libero rhoncus ut.
</div>
<h4>display: block:</h4>
<div id="Dv-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
at pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p> Vestibulum volutpat tellus
diam, consequat gravida libero rhoncus ut.
</div>
<h4>display: inline-block:</h4>
<div id="Div-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
at pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p> Vestibulum volutpat tellus
diam, consequat gravida libero rhoncus ut.
</div>
<h4>display: contents:</h4>
<div class="Div-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
at pulvinar felis blandit. <div class="b">HELLO WORLD!</div> Vestibulum volutpat tellus
diam, consequat gravida libero rhoncus ut.
</div><br>
<div class="Div-6">
<p class="C">These two paragraphs generates inline boxes, and it results in</p>
<p class="C">no distance between the two elements.</p>
</div>
</div>
<style>
p.ex1, p.ex2, p.ex3, p.ex4 {color: red;}
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
.Div-5 {display: contents; border: 0.1vw solid red; background-color: lightgrey; padding: 1vw; width: 20vw;}
.Div-5 .b {border: 0.1vw solid blue; background-color: lightblue; padding: 1vw;}
.Div-6 {display: inline;}
p.C {display: inherit;}
</style>