A
B
C
D
E
F
Revision:
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.
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
<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>