親要素に余分なスペースがある理由

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

あなたの開始タグと終了タグの間にスペースがあります。親の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>

Answer 2

あなたはデフォルトではインラインですので、SVG要素のためのdisplay: blockを設定する必要があります。あなたの質問には良い答えがあります：Look here