So entfernen Sie zusätzlichen Speicherplatz unter svg im div-Element

87

Hier ist eine Illustration des Problems (getestet in Firefox und Chrome):

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

Ansicht auf JSFiddle

Beachten Sie den zusätzlichen redPlatz im unteren Bereich divunter dem Blau svg.

Bereits versucht zu setzen paddingund marginvon beiden Elementen zu 0, aber ohne Glück.

html css svg Daniel
quelle
Scheint mit einem ähnlichen Problem mit Bildern in Zusammenhang zu stehen, z . B. stackoverflow.com/questions/7774814/… .
Daniel

Antworten:

173

Sie brauchen display: block;auf Ihrem svg.

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

Dies liegt daran, dass Inline-Block-Elemente (wie <svg>und <img>) auf der Textgrundlinie sitzen. Der zusätzliche Platz, den Sie sehen, ist der Platz, der übrig bleibt, um Zeichen-Nachkommen aufzunehmen (der Schwanz auf 'y', 'g' usw.).

Sie können auch verwenden, vertical-align:topwenn Sie es behalten müssen inlineoderinline-block

Andy
quelle
Tolle. Fügen alle Inline-Elemente unten Leerzeichen hinzu?
Clapas
2
Die Erklärung ist, dass inline-blockElemente (wie <svg>und <img>) auf der Textgrundlinie sitzen. Der zusätzliche Platz, den Sie sehen, ist der Platz, der übrig bleibt, um Zeichen-Nachkommen aufzunehmen (der Schwanz auf 'y', 'g' usw.).
Paul LeBeau
1
Ich würde es vorziehenvertical-align:top
John Xiao
Ich war überzeugt, dass der zusätzliche Platz etwas damit zu tun hatte line-height, aber das Einstellen line-height: 0des SVG und / oder seines Containers machte keinen Unterschied. Nur display: blockgelöst. Dies ist so ein Problem, wenn Sie zufällig an einer großen SVG arbeiten, weil Sie es nie als Inline betrachten würden. Wenn Sie jedoch ein kleines Symbol haben, ist dies sinnvoll.
Devuxer
display: blocknicht für mich arbeiten, aber vertical-aligntat
Jay
12

svgist ein inlineElement. inlineElemente verlassen Leerraum.

Lösung:

In display:blockzu svg, oder Make Höhe von Eltern div gleiche wie svg.

DEMO hier.

Hiral
quelle
4

Eine andere Alternative ist hinzufügen font-size: 0zu svg parent.

Engelo Lucas
quelle
3

Ändern Sie die displayEigenschaft des SVG in block.

Malachi
quelle
1

Versuchen Sie , height:100pxzu divund mit einem height="100%"auf svg:

<div style="background-color:red;height:100px">
    <svg height="100%" width="100" style="background-color:blue;"></svg>
</div>
danrodi
quelle
4
Vielen Dank für Ihren Kommentar. Dies funktioniert gut, wird aber schwierig, wenn man die Höhe des nicht kenntsvg im Voraus .
Daniel
1

Fügen Sie einfach dem Hauptteil div Höhe hinzu 

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

Ändern Sie Ihren Stil in

style = "Hintergrundfarbe: rot; Zeilenhöhe: 0;"

jcdsvg
quelle