代码之家 › 专栏 › 技术社区 › dumbmatter

CSS网格中div中的SVG在底部添加了一些额外的填充,为什么?复制

css-grid svg css

dumbmatter · 技术社区 · 2 年前

我正在尝试使用CSS网格显示一个SVG网格。像这个例子这样简单,它只是div,还没有SVG。这很好用。

#wrapper {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  width: 650px;
  
  .child {
    background-color: green;
    aspect-ratio: 2/3;
  }
}

<div id="wrapper">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

现在,如果我在其中一个div中添加一个SVG,它会打乱对齐方式:

#包装物{
显示:网格;
栅极间隙:2px;
格线模板列:1fr 1fr 1 fr 1 fl 1 fr;
宽度:650px;

小孩
背景颜色:绿色;
纵横比:2/3;
}
}

<div id="wrapper">
  <div class="child"></div>
  <div class="child"><svg viewBox="0 0 400 600" style="background-color: black"><circle r="45" cx="50" cy="50" fill="red" /></svg></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

不知怎么的,它在包含SVG的“子”div的底部添加了一点额外的填充,但我不知道为什么会发生这种情况,也不知道如何防止。有什么想法吗?