Why "display: inline-block" add a 3px height space in the bottom of element?

Question

.items {
  width: 300px;
  background: green;
}
.item {
  display: inline-block;
  width: 300px;
}
.empty, .not-empty {
  background: red;
  width: 50px;
  height: 30px;
}

<div class="items">
  <div class="item">
    <div class="empty"></div>
  </div>
  <div class="item">
    <div class="not-empty">1</div>
  </div>
  <div class="item">
    <div class="empty"></div>
  </div>
</div>

Please run code snippet to see the problem.

You can see there's a space line of 3px height under the .item element if it has an empty div child. But if .item element has a div that is not empty, the space line disappeared.

Really difficult to understand, please help.

Answer 1

when you use inline-block is that whitespace in HTML becomes visual space on screen. By default inline-block has a baseline vertical align just change it to top..

.items {
  width: 300px;
  background: green;
}
.item {
  display: inline-block;
  width: 300px;
  vertical-align: top;
}
.empty, .not-empty {
  background: red;
  width: 50px;
  height: 30px;
}

<div class="items">
  <div class="item">
    <div class="empty"></div>
  </div>
  <div class="item">
    <div class="not-empty">1</div>
  </div>
  <div class="item">
    <div class="empty"></div>
  </div>
</div>