Question

我有一个div，我想用图标填充。但是，即使我已将div大小设置为设定值，它仍会调整大小。我想我理解为什么当我把内容放大时它会调整大小（虽然我认为它会切断额外的材料），但我绝对不明白为什么div在制作文本时会变得更大较小的

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

带有文字的div元素设置为display: table-cell。这意味着该元素默认为vertical-align: baseline。

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

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

尝试vertical-align: middle。

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

1 个答案:

jsFiddle