Html 为什么溢出时overflow： auto框的底部有一个小间隙

发布于07月27日

我有以下演示设置.正如你所看到的，由于某种原因，在那里有一个很小的缺口，我不知道为什么会有它，以及如何摆脱它.任何对正在发生的事情的解释都将受到赞赏.

#container {
  width: 100%;
  height: 200px;
  background: #ffaaaa;
  overflow: auto;
}

.content {
  background: #aaffaa;
  font-size: 8rem;
  line-height: 1;
}

<div id="container">
  <div class="content">CONTENT</div>
  <div class="content">CONTENT</div>
  <div class="content">CONTENT</div>
</div>

推荐答案

文本内容在行框中溢出.如果你加上大约span个带轮廓或边框的东西，你会看到这一点:

#container {
  width: full;
  height: 200px;
  background: #ffaaaa;
  overflow: auto;
}

.content {
  background: #aaffaa;
  font-size: 8rem;
  line-height: 1;
}
.content span {
  border: 1px solid;
}

<div id="container">
  <div class="content"><span>CONTENT</span></div>
  <div class="content"><span>CONTENT</span></div>
  <div class="content"><span>CONTENT</span></div>
</div>

你可以清楚地看到边界是如何溢出的.原因与line-height: 1有关，它将行框的高度设置为小于文本内容的值

不要那样做.您可以控制行框的高度，但不能控制文本内容的高度.保留缺省值line-height或使用更大的值

#container {
  width: full;
  height: 200px;
  background: #ffaaaa;
  overflow: auto;
}

.content {
  background: #aaffaa;
  font-size: 8rem;
  /*line-height: 1;*/
}
.content span {
  border: 1px solid;
}

<div id="container">
  <div class="content"><span>CONTENT</span></div>
  <div class="content"><span>CONTENT</span></div>
  <div class="content"><span>CONTENT</span></div>
</div>