私はレムにSVGの間に奇妙な上部と下部の空白を取得

Question

多分その愚かな質問が、それでも...

私はレムと書いていたとき、私はdivのブロックにSVGの間に奇妙な空白を取得していますなぜたぶん誰かが私を説明することができます。

P.S font-size in htmlは10vwでなければなりません。

例：http://codepen.io/anon/pen/OWqwXZ

a 

Answer 1

SVGsは<img>と同じように扱われます。デフォルトでは、それらはinline-blockであるため、テキストのベースラインに位置します。

これが欲しくない場合は、<svg>をdisplay:blockに設定してください。

html{ 
 
    font-size: 10vw; 
 
} 
 

 
.wrapper{ 
 
    width: 100%; 
 
    background-color: pink; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
svg{ 
 
    wdith: 0.30rem; 
 
    height: 0.30rem; 
 
    background-color: red; 
 
    display: block; 
 
    vertical-align: top; 
 
}

<div class="wrapper"><svg viewBox="0 0 30 30"> 
 
    <path d="M429.9 758.48C425.78 751.33 416.63 748.88 409.47999999999996 753.01C402.33 757.13 399.87999999999994 766.28 404.00999999999993 773.43C408.12999999999994 780.5799999999999 417.2799999999999 783.03 424.42999999999995 778.9C431.5799999999999 774.77 434.03999999999996 765.63 429.9 758.48ZM422.94 776.31C417.21999999999997 779.6199999999999 409.9 777.66 406.6 771.9399999999999C403.29 766.2199999999999 405.25 758.9 410.97 755.5999999999999C416.70000000000005 752.29 424.01000000000005 754.2499999999999 427.32000000000005 759.9699999999999C430.62000000000006 765.6999999999999 428.66 773.0099999999999 422.94000000000005 776.31ZM422.34 766.85L414.57 771.33C413.84999999999997 771.75 413.27 771.4100000000001 413.26 770.59L413.21999999999997 761.52C413.21999999999997 760.6999999999999 413.79999999999995 760.36 414.51 760.78L422.34 765.35C423.04999999999995 765.76 423.04999999999995 766.44 422.34 766.85Z " fill-opacity="1" transform="matrix(1,0,0,1,-402,-751)"></path> 
 
</svg></div>