CSS Display Properties

by nabendu

HTML

<!--display: block -->
<div class="x">x</div>
<div class="y">y</div>
<div class="z">z</div>
<hr />

<!--display: inline-block -->
<div class="x1">x1</div>
<div class="y1">y1</div>
<div class="z1">z1</div>
<hr />

<!--display: inline -->
<div class="x2">x2</div>
<div class="y2">y2</div>
<div class="z2">z2</div>

CSS

.x, .y, .z{
  display: block;
  color: white;
  font-size: 40px
}

.x1, .y1, .z1{
  display: inline-block;
  color: white;
  font-size: 40px
}

.x2, .y2, .z2{
  display: inline;
  color: black;
  font-size: 40px
}

.x, .x1, .x2{background: red;}
.y, .y1, .y2{background: blue;}
.z, .z1, .z2{background: green;}