<html>
<head>
<title>Advanced display example</title>
<style>
div,
span {
border: 2px solid lightgray;
margin: 3px 0;
padding: 5px;
}
.none {
display: none
}
.block1 {
display: block
}
.block2 {
display: block;
width: 250px;
height: 50px;
}
.inline {
display: inline;
width: 200px;
height: 50px;
}
.inline-block {
display: inline-block;
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div>
<div class="block1">block1 box</div>
<div class="block2">block2 box</div>
<span class="inline">inline box</span>
<span class="inline-block">inline-block box</span>
</div>
<div class="none">
<h2>Hello</h2>
</div>
<div>
<h2>World</h2>
</div>
</body>
</html>