设置aspect-ratio的div内添加SVG后为何多出4px高度？

你的div高度变成104px的核心原因是SVG默认是行内替换元素，浏览器会按照行内元素的规则渲染它，导致容器底部出现额外间距。

具体细节：

• 行内元素默认与文字基线对齐，SVG作为替换元素，底部会留出对应文字下伸区域（比如字母g、y的底部空间）的空白，这部分高度由容器默认行高决定。
• 你给div设置的aspect-ratio: 1仅在内容高度小于计算值时生效，当子元素布局撑开容器高度时，该属性不会强制将高度压回100px。

可以通过以下几种方式修复：

• 将SVG转为块级元素，消除行内基线对齐的间距：

  svg {
    background: blue;
    display: block;
  }
  

• 给容器设置line-height: 0，清除行内元素的行高留白：

  .container {
    width: 100px;
    aspect-ratio: 1;
    background: red;
    line-height: 0;
  }
  

• 改变SVG的垂直对齐方式，避免基线留白：

  svg {
    background: blue;
    vertical-align: bottom;
  }
  

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