html - 为什么改变字体大小也会改变 div 的高度？

Question

我有一个要用图标填充的 div。但是，即使我已将 div 大小设置为设定值，它仍然会调整大小。我想我明白为什么当我使内容变大时它会调整大小(尽管我认为它只会切断额外的 Material )，但我绝对不明白为什么当我使文本变小时 div 变大.

//functional
#descriptionContainer {
  background-color: yellow;
  display: table-row;
}

#descriptionIcon {
  width: 50px;
  height: 50px;
  background-color: green;
  display: table-cell;
}

#descriptionText {
  background-color: blue;
  width: 100px;
  display: table-cell;
  text-align: justify;
}

//broken
#descriptionContainer2 {
  background-color: yellow;
  display: table-row;
}

#descriptionIcon2 {
  width: 50px;
  height: 50px;
  background-color: green;
  display: table-cell;
  font-size: 5px; //why does this change the size of the div
}

#descriptionText2 {
  background-color: blue;
  width: 100px;
  display: table-cell;
  text-align: justify;
}

<div id="descriptionContainer">
  <div id="descriptionIcon">
    test test test test
  </div>
  <div id="descriptionText">
    this is functional
  </div>
</div>
<br><br>
<div id="descriptionContainer2">
  <div id="descriptionIcon2">
    test test test test
  </div>
  <div id="descriptionText2">
    this is not functional
  </div>
</div>

Answer 1

带有文本的 div 元素设置为 display: table-cell。这意味着该元素具有 vertical-align: baseline , 默认情况下。

当您更改字体大小时，这会移动容器内文本 div 的基线。我相信，这就是盒子大小变化的原因:基线在跳跃。

要防止调整大小，请将 vertical-align 属性设置为其他值。

试试vertical-align: middle。

jsFiddle