Display
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Display Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.box {
background: lightblue;
border: 2px solid black;
padding: 10px;
margin: 5px;
}
.inline span {
display: inline;
background: yellow;
}
.block span {
display: block;
background: lightgreen;
}
.inline-block span {
display: inline-block;
width: 120px;
height: 40px;
background: orange;
}
.none {
display: none;
}
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>Display Types</h1>
<h2>Inline</h2>
<div class="inline">
<span>Box 1</span>
<span>Box 2</span>
<span>Box 3</span>
</div>
<h2>Block</h2>
<div class="block">
<span>Box 1</span>
<span>Box 2</span>
<span>Box 3</span>
</div>
<h2>Inline-Block</h2>
<div class="inline-block">
<span>Box 1</span>
<span>Box 2</span>
<span>Box 3</span>
</div>
<h2>None vs Visibility</h2>
<div class="box none">display: none</div>
<div class="box hidden">visibility: hidden</div>
<div class="box">Normal Box</div>
</body>
</html>
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Display Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.box {
background: lightblue;
border: 2px solid black;
padding: 10px;
margin: 5px;
}
.inline span {
display: inline;
background: yellow;
}
.block span {
display: block;
background: lightgreen;
}
.inline-block span {
display: inline-block;
width: 120px;
height: 40px;
background: orange;
}
.none {
display: none;
}
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>Display Types</h1>
<h2>Inline</h2>
<div class="inline">
<span>Box 1</span>
<span>Box 2</span>
<span>Box 3</span>
</div>
<h2>Block</h2>
<div class="block">
<span>Box 1</span>
<span>Box 2</span>
<span>Box 3</span>
</div>
<h2>Inline-Block</h2>
<div class="inline-block">
<span>Box 1</span>
<span>Box 2</span>
<span>Box 3</span>
</div>
<h2>None vs Visibility</h2>
<div class="box none">display: none</div>
<div class="box hidden">visibility: hidden</div>
<div class="box">Normal Box</div>
</body>
</html>