javascript - inline-block 元素内的内容如何影响其高度？

Question

当 inline-block 元素内没有内容时，外部 div 的高度为 32px - 第一个块。

当 inline-block 元素中有一些文本时，外部 div 的高度为 29px - 第二个块

inline-block 元素内的内容如何影响它的高度以及这个 3px 来自哪里？

body {
  line-height: 26px;  
}

div {
  margin: 10px;
  border: solid 1px blue;  
}

span {
  border: solid 1px;
}

.rect {
  display: inline-block;
  height: 20px;
  width: 20px;
}

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span class="rect"></span>
  <span class="rect"> </span>
  <span class="rect">.</span>
  <span class="rect">A</span>
</div>

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span class="rect">.</span>
  <span class="rect">A</span>
</div>

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>

标签： javascripthtmlcss