div要素のsvgの下の余分なスペースを取り除く方法

93

これが問題の実例です（FirefoxとChromeでテスト済み）：

<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

スニペットを展開

JSFiddleで表示

青redのdiv下の内側の余分なスペースに注意してくださいsvg。

paddingとmargin両方の要素をに設定しようとしまし0たが、運がありませんでした。

html css svg

— ダニエル
ソース

画像の同様の問題に関連しているようです。例：stackoverflow.com/questions/7774814/…。

— ダニエル

182

あなたは必要とするdisplay: block;あなたにsvg。

<svg style="display: block;"></svg>

これは、インラインブロック要素（<svg>およびなど<img>）がテキストベースライン上にあるためです。表示されている余分なスペースは、文字の子孫（ 'y'、 'g'などのテール）を収容するために残されたスペースです。

あなたがvertical-align:topそれを保持する必要がある場合にも使用できますinlineまたはinline-block

— アンディ
ソース

すごい。では、すべてのインライン要素は下部に空白を追加しますか？

— clapas 2015

2

説明は、inline-block要素（<svg>およびなど<img>）がテキストベースライン上にあるということです。表示されている余分なスペースは、文字の子孫（ 'y'、 'g'などのテール）を収容するために残されたスペースです。

— Paul LeBeau 2017

1

私がしたいvertical-align:top

— ジョンシャオ

余分なスペースは何か関係があると確信していましたline-heightがline-height: 0、svgやそのコンテナーを設定しても違いはありませんでした。display: blockそれを解決しただけです。これは、大きなSVGで作業している場合、インラインとは考えられないため、このような落とし穴です。ただし、小さなアイコンがある場合は、それは理にかなっています。

— devuxer

display: block私にvertical-alignはうまく

— ジェイ

12

svgあるinline要素が。inline要素は空白を残します。

解決：

に追加display:blockするsvgか、親divの高さをと同じにしsvgます。

デモはこちら。

— ヒラル
ソース

5

別の方法はfont-size: 0、svg親に追加することです。

— アンジェロルーカス
ソース

3

displaysvgのプロパティをに変更しますblock。

— マラキ
ソース

1

onに追加height:100pxしdivて使用してみてください：height="100%"svg

<div style="background-color:red;height:100px">
    <svg height="100%" width="100" style="background-color:blue;"></svg>
</div>

— ダンロディ
ソース

4

ご意見をありがとうございます。これは問題なく機能しますがsvg、事前に高さがわからない場合は注意が必要です。

— ダニエル

1

メインのdiv要素に高さを追加するだけです

<div style="background-color: red;height:100px"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

— ファーシャッド
ソース

0

スタイルをに変更します

style = "background-color：red; line-height：0;"

— jcdsvg
ソース