为什么父元素有额外的空间

Question

嗨我在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>

示例链接：http://jsfiddle.net/mkn9t627/7/

Answer 1

您的开始和结束标记之间有空格。将父级的字体大小设置为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>

Answer 2

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