SVG 是否有边距或填充，或者我错过了什么？答案

【问题标题】：Do SVGs have a margin or padding or am I missing something?SVG 是否有边距或填充，或者我错过了什么？
【发布时间】：2021-12-20 14:37:37
【问题描述】：

我是使用 SVG 的新手，但是我使用了很多部分，并且从未遇到过这个错误。我试图让两个部分像这样（垂直）彼此齐平：

但是，我有一个很大的空白区域，我认为它是某物上的边距或填充，但我已将 SVG 及其父部分的边距和填充都设置为 0px。这是它的样子：我试图删除我发现的所有设置了默认属性（h1 标签和 div）的元素的填充和边距，但无济于事。这是我的 HTML：

    <section class="first">
        <h1 class="title">Biodiversity Committee</h1>
        <div class="hillcontainer"><img class="hills" src="./assests/hills.svg" /></div>
    </section>
    <section class="second">
        <div class="underhillcontainer"><img class="under-hills" src="./assests/under-hills.svg" /></div>
    </section>

这是我的 CSS：

  .first {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .hillcontainer {
    display: block;
  }
  .hills {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
    margin-top: 0px;
    margin: 0 auto;
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .second {
    overflow: hidden;
    justify-content: center;
    margin: 0px;
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .underhillcontainer > svg {
    display: block;
  }
  .under-hills {
    position: relative;
    margin: 0 auto;
    padding: 0px;
    top: 0%;
    left: 0%;
    margin-top: 0px;
    vertical-align: top;
    width: 100%;
    z-index: -1;
    padding-top: 0px;
    padding-bottom: 0px;
  }

【问题讨论】：

您可能需要打开 SVG 源代码，看看他们是否在 SVG 中添加了空格。
刚刚浏览了 SVG，没有多余的空白，清理了 Inkscape 中的多余空间，仍然没有，谢谢你的建议，因为这意味着我在 SVG 中找到了一些额外的代码，我可以删除！
在这种情况下，我可能会尝试用具有相同内在尺寸的纯色 png 替换 SVG，看看您是否有同样的问题。如果你这样做，那么这是一个 CSS 布局问题，如果你不这样做，那么我可能会看看 SVG 是否存在 preserveAspectRatio + 尺寸问题。
我删除了 SVG 标签并添加了 flexbox 和 css-position。应该为您提供所需的帮助。
谢谢，正如您发布的我找到了自己的解决方案一样，我不小心从该部分删除了相对位置，这导致了问题。非常感谢您的所有帮助，祝您有美好的一天！

标签： html css flexbox css-position

【解决方案1】：

我不小心从导致问题的部分中删除了position: relative;。

新的 CSS：

.first {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /*added line*/
  }

【讨论】：