如何消除置于两个div间的SVG图形顶部空白？

常见原因及修复方案 #

1. 内联元素基线对齐导致的空白 #

SVG默认属于内联元素，会和文本基线对齐，进而产生顶部空白。直接将SVG转为块级元素就能解决：

svg {
  display: block;
}

也可以通过调整垂直对齐方式处理：

svg {
  vertical-align: top;
}

2. SVG自身视图设置问题 #

如果SVG的viewBox没有完整覆盖图形范围，或者preserveAspectRatio参数设置不当，也会出现空白。检查并修正viewBox，确保它精准包裹所有图形元素：

<!-- 示例：viewBox范围匹配图形实际尺寸 -->
<svg viewBox="0 0 200 150" ...>
  <!-- 图形内容 -->
</svg>

同时可以设置preserveAspectRatio="xMinYMin meet"，让图形从容器左上角开始对齐。

3. 父容器或相邻div的边距问题 #

检查SVG的父容器、上下两个div是否存在多余的margin或padding，移除这些边距即可消除间隙：

/* 清除多余边距 */
.svg-container, .top-div, .bottom-div {
  margin: 0;
  padding: 0;
}

4. SVG的overflow属性问题 #

部分SVG会默认保留溢出区域，给SVG添加overflow: hidden可以裁剪多余空白：

svg {
  overflow: hidden;
}

快速排查建议 #

优先尝试给SVG添加display: block，这是解决此类问题最常用的方案。如果无效，再依次检查视图设置、元素边距等因素。

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