为何设置overflow: auto的容器溢出时底部会出现小间隙？

成因 #

这个底部小间隙是CSS行内元素的基线对齐规则导致的：

• 当元素内包含文本时，文本默认以**基线（baseline）**对齐，基线下方会预留出容纳下伸字母（比如g、j、y）的空间，这部分空间是字体本身的设计属性。
• 你的.content容器里的文本属于行内元素，即便设置了line-height: 1，父容器#container依然会包含这部分基线下方的预留空间。当内容溢出触发滚动时，这部分空间就会在容器底部显现为小间隙。

解决方法 #

有几种简单的方式可以消除这个间隙：

方法1：将.content转为块级元素

块级元素不会遵循行内元素的基线对齐规则，直接消除预留空间：

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

.content {
  background: #aaffaa;
  font-size: 8rem;
  line-height: 1;
  display: block; /* 新增 */
}

方法2：修改行内元素的对齐方式

通过vertical-align改变文本的对齐基准，让文本底部与容器底部对齐，不再预留基线空间：

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

.content {
  background: #aaffaa;
  font-size: 8rem;
  line-height: 1;
  vertical-align: bottom; /* 新增 */
}

方法3：消除父容器的字体影响

给#container设置font-size: 0，同时重置.content的font-size，这样父容器不会继承行内文本的基线空间：

#container {
  width: 100%;
  height: 200px;
  background: #ffaaaa;
  overflow: auto;
  font-size: 0; /* 新增 */
}

.content {
  background: #aaffaa;
  font-size: 8rem; /* 重置字体大小 */
  line-height: 1;
}

内容的提问来源于stack exchange，提问作者the thinker