垂直排列SVG与div元素时的间距问题

嘿，我之前也踩过这个坑！你已经重置了全局的margin，但还是出现间距，大概率是SVG默认的inline-block显示属性在搞事情——这类元素会和文本一样基于基线对齐，哪怕没有文字，底部也会留出一小段默认的间距，和你设置的margin无关。

给你几个靠谱的解决办法，挑适合你的来用：

方法一：把SVG改成块级元素 #

直接给SVG设置display: block;，这样它就不会再遵循inline元素的基线规则，间距自然就消失了。修改后的样式可以这样写：

* {
  margin: 0;
  padding: 0; /* 建议加上padding重置，避免其他隐性间距 */
}
svg {
  display: block;
}

方法二：用Flex布局来控制排列 #

如果你的需求是垂直居中排列，直接把父容器改成flex布局会更省心，不仅能消除间距，还能轻松实现居中效果：

<div style="width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin-top: 2em;">
  <!-- 这里放你的SVG和div元素 -->
</div>

解释一下：flex-direction: column让元素垂直排列，align-items: center实现水平居中，justify-content: flex-start保持顶部对齐（如果需要垂直居中可以改成center），这样元素之间不会有任何多余的默认间距。

额外小提示 #

如果父容器设置了text-align: center，对于inline/inline-block元素来说，也可能间接导致一些间距问题，用Flex布局的话就不用纠结这个啦。

备注：内容来源于stack exchange，提问作者swiftUser