CSS Grid中Div内嵌SVG底部出现额外空白的原因及解决办法

问题场景 #

使用CSS Grid实现网格布局时，纯div子元素的布局完全正常：

正常布局代码 #

#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后，该子元素底部出现额外空白，导致网格布局对齐混乱：

出现问题的代码 #

#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"><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元素默认是行内替换元素，浏览器会按照行内元素的规则对齐它——默认与文字基线对齐，底部的空白就是为文字的下行部分（比如字母g、y的底部）预留的空间，即使父元素里没有文字，这个留白依然存在。

解决方法 #

以下几种方案都可以消除这个空白：

• 将SVG设为块级元素：直接改变SVG的显示类型，避免行内对齐规则的影响

  .child svg {
    display: block;
    width: 100%; /* 可选，让SVG填满父容器宽度 */
    height: 100%; /* 可选，让SVG填满父容器高度 */
  }
  

  也可以直接在SVG的内联样式中添加display: block。

• 修改SVG的垂直对齐方式：让SVG不再以基线对齐，比如设置为底部、顶部或中间对齐

  .child svg {
    vertical-align: bottom; /* 或 top/middle */
  }
  

• 给父元素设置溢出隐藏：裁剪掉父元素内超出的空白部分

  .child {
    overflow: hidden;
  }
  

• 消除父元素的行高：行高会影响行内元素的垂直空间，设置为0可以移除留白

  .child {
    line-height: 0;
  }
  

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