A
B
C
D
E
F
Revision:
This property 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.
display: none
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex1"> HELLO WORLD! </p>, four five six seven. </div>
<style>
p.ex1 {display: none;}
</style>
display: inline
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex2">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex2 {display: inline;}
</style>
display: block
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex3">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex3 {display: block;}
</style>
display: inline-block
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex4">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex4 {display: inline-block;}
</style>
display: contents
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex5">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex5 {display: contents;}
</style>
display: flex
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex6">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex6 {display: flex;}
</style>
display: grid
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex7">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex7 {display: grid;}
</style>
display: inline-flex
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex8">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex8 {display: inline-flex;}
</style>
display: inline-grid
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex9">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex9 {display: inline-grid;}
</style>
display: inline-table
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex10">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex10 {display: inline-table;}
</style>
display: list-items
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex11">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex11 {display: list-item;}
</style>
display: run-in
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex12">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex12 {display: run-in;}
</style>
display: table
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex13">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex13 {display: table;}
</style>
display: table-caption
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex14">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex14 {display: table-caption;}
</style>
display: table-column-group
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex15">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex15 {display: table-column-group;}
</style>
display: table-header-group
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex16">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex16 {display: table-header-group;}
</style>
display: table-footer-group
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex17">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex17 {display: table-footer-group;}
</style>
display: table-row-group
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex18">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex18 {display: table-row-group;}
</style>
display: table-cell
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex19">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex19 {display: table-cell;}
</style>
display: table-column
HELLO WORLD!
, four five six seven.code
<div>one two three, <p class="ex20">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex20 {display: table-column;}
</style>
display: table-row
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex21">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex21 {display: table-row;}
</style>
display: initial
HELLO WORLD!
, four five six seven.
<div>one two three, <p class="ex22">HELLO WORLD!</p>, four five six seven.</div>
<style>
p.ex22 {display: initial;}
</style>
<div>
<label for="display">Choose a display value:</label>
<select id="display">
<option selected>block</option>
<option>initial</option>
<option>inline</option>
<option>inline-block</option>
<option>none</option>
<option>flex</option>
<option>inline-flex</option>
<option>grid</option>
<option>inline-grid</option>
<option>table</option>
<option>list-item</option>
</select>
</div>
<style>
article {background-color: burlywood;}
article span{background-color: red; color: white; margin: 1px;}
article, span {padding: 1vw;border-radius: 1.5vw;}
article, div { margin: 2vw;}
label{font-size: 1.5vw;}
select{width: 12vw; height: 2.5vw;font-size: 1.25vw; border-radius: 5%;}
option{font-size: 1.25vw;}
</style>
<script>
const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');
function updateDisplay() {
articles.forEach((article) => {
article.style.display = select.value;
});
}
select.addEventListener('change', updateDisplay);
updateDisplay();
</script>
<div class="ex1">display: block
<span class="block">1</span>
<span class="block">2</span>
<span class="block">3</span>
</div>
<style>
.ex1{display: block; color: darkred; font-weight: bold; text-align: center; border:
3px solid lightblue; background-color: lightgrey; height: 20vw;}
.block{display: block; width: 80%; border: 1px solid AliceBlue; background-color:
darkgrey; height: 4vw; font-weight: normal; text-align: center; padding-top: 2vw;}
</style>
display: inline
<ul>
<li class="in">Menu.1</li> |
<li class="in">Menu.2</li> |
<li class="in">Menu.3</li> |
<li class="in">Menu.4</li>
</ul>
<style>
.ex2{margin-top: 1vw; color: darkred; font-weight: bold; text-align: center;
border:3px solid lightblue; background-color: lightgrey; height: 5vw;}
.in{display: inline; font-weight: normal;}
</style>
First block paragraph
Another block paragraph
<p>First block paragraph</p>
<ul>
<li class="inb">This is block menu.1</li>
<li class="inb">This is block menu.2</li>
</ul>
<p>Another block paragraph</p>
<ul>
<li class="inb">This is block menu.1</li>
<li class="inb">This is block menu.2</li>
</ul>
<style>
.ex3{margin-top: 1vw; color: darkred; text-align: center; font-weight: bold;
border:3px solid lightblue; background-color: lightgrey; height: 10vw;}
.inb{display: inline-block; font-weight: normal;}
</style>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. HELLO WORLD! Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
<p class="con">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
<span class="b">HELLO WORLD!</span> Vestibulum volutpat tellus diam,
consequat gravida libero rhoncus ut.
</p>
<style>
.ex4{margin-top: 1vw; color: darkred; text-align: center; font-weight: bold;
border:3px solid lightblue; background-color: lightgrey; height: 10vw;}
.con{display: contents; border: 1px solid red; background-color:
lightgrey; padding: 10px; width: 200px;}
.b {border: 1px solid blue; background-color: lightblue; padding: 10px;}
</style>
Codes:
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:darkgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
<style>
.ex5{margin-top: 1vw; color: darkred; text-align: center; font-weight: bold; border:3px solid lightblue;
background-color: lightgrey; height: 12vw;}
#main{display: flex; flex-direction: row-reverse;}
#main div {width: 1vw; height: 10vw;}
</style>