滚动容器内SVG底部出现空白gutter的原因及修复方案咨询

这个红色空白条（gutter）出现的核心原因是SVG元素的默认垂直对齐方式导致的额外空间。

SVG属于替换元素，默认情况下会和文本的基线（baseline）对齐。为了容纳像g、y这类带有下伸部分的字母，浏览器会在基线下方预留一小段空白空间（通常由字体的line-height规则带来）。当SVG放在滚动容器里时，这段预留空间会被算进容器的内容高度里——你的SVG设置了height:150px，但加上这段空白后，容器的总内容高度会略大于150px，滚动到底部时，这段空白区域就会露出容器的红色背景。

而div是块级元素，默认不会遵循文本基线对齐规则，所以不会产生这个额外空间，滚动显示正常。

有几种简单的方法可以解决这个问题：

1. 给SVG设置块级显示 #

直接把SVG改成块级元素，取消基线对齐的行为：

.inner svg {
  display: block;
}

2. 修改SVG的垂直对齐方式 #

把SVG的垂直对齐方式改成top、bottom或者middle，避开基线对齐：

.inner svg {
  vertical-align: top;
}

3. 给滚动容器设置line-height: 0 #

如果不想修改SVG的样式，可以给外层的wrapper容器设置line-height: 0，去掉文本基线的预留空间：

.wrapper {
  /* 原有样式保留 */
  line-height: 0;
}

这三种方法都能解决问题，其中第一种（设置display:block）是最直观且通用的方案，推荐优先使用。

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