web-dev-qa-db-ja.com

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

以下に問題の例を示します（FirefoxとChromeでテスト済み）：

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

http://jsfiddle.net/EXLSF/

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

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

htmlcsssvg
66
Daniel

svgにdisplay: block;が必要です。

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

これは、インラインブロック要素（<svg>や<img>など）がテキストベースライン上にあるためです。表示されている余分なスペースは、文字ディセンダー（「y」、「g」などの末尾）を収容するために残されたスペースです。

inlineまたはvertical-align:topを保持する必要がある場合は、inline-blockを使用することもできます

127
Andy

svgはinline要素です。 inline要素は空白を残します。

溶液：

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

DEMO here。

9
Hiral

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

4
Ângelo Lucas

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

3
Malachi

height:100pxをdivに追加し、svgでheight="100%"を使用してみてください。

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

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

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

スタイルを変更します

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

0
jcdsvg