Fighting space inline-block

by nabendu

HTML

<!--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>
<hr />

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

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

CSS

.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;}