为什么父元素有额外的空间[重复]答案

【问题标题】：why parent element has additional space [duplicate]为什么父元素有额外的空间[重复]
【发布时间】：2017-12-22 06:27:51
【问题描述】：

您好，我在 div 元素中有 svg 矩形。我已经将rect元素高度设置为300。在检查父元素（div）高度时显示为304，为什么？

<div>
<svg width="300" height="300">
  <rect width="300" height="300" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

 </div>

【问题讨论】：

【解决方案1】：

开始标签和结束标签之间有空格。将 parent 的 font-size 设置为 0，它将在检查器中显示 300px。

div {
  font-size: 0;
}

<div>
  <svg width="300" height="300">
  <rect width="300" height="300" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
</div>

【讨论】：

【解决方案2】：

您需要为 svg 元素设置 display: block，因为默认情况下它是内联的。这是您问题的一个很好的答案：Look here

【讨论】：