为什么＆＃34;显示：inline-block＆＃34;在元素的底部添加3px的高度空间？

Question

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请运行代码段以查看问题。

如果它有一个空的div子元素，你可以看到.item元素下面有一个3px高度的空格行。但如果.item元素的div不为空，则空格线消失。

真的很难理解，请帮忙。

Answer 1

当你使用inline-block时，HTML中的空格成为屏幕上的可视空间。默认情况下，inline-block有一个基线垂直对齐，只需将其更改为顶部..

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;