Falscher Rand auf SVG-Element

Lesezeit: 2 Minuten

Ich habe ein sehr einfaches Dokument (siehe auch JSFiddle):

<style>
html, body, svg, div {
    margin: 0;
    padding: 0;
    border: 0;
}
</style>
<body>
<svg id="foo"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   style="width: 768px; height: 1004px;">
</svg>
</body>

Aus irgendeinem Grund ist die svg -Element erhält einen unteren Rand von 3 Pixel oder 4 Pixel (d. h. die body Element bekommt eine Höhe von 1007px, 1008px oder sogar 1009px; das svg margin selbst ist 0, wenn es mit den Browser-Debug-Tools untersucht wird.)

Wenn ich die ersetze svg mit einer div, der störende Rand verschwindet. Das Verhalten ist in Opera 12, Chrome 33, Firefox 26 und Internet Explorer 11 konsistent, daher bin ich zuversichtlich, dass das Verhalten von Natur aus und standardkonform ist. Ich verstehe es einfach nicht.

Dies ist ein häufiges Problem mit inline Elemente. Um dies zu lösen, fügen Sie einfach hinzu vertical-align:top.

AKTUALISIERTES BEISPIEL HIER

#foo {
    background: #fff;
    vertical-align:top;
}

Es ist erwähnenswert, dass der Standardwert für die vertical-align Eigentum ist baseline. Dies erklärt das Standardverhalten. Werte wie z top, middleund bottom wird die Ausrichtung korrigieren.

Alternativ könnten Sie das Element machen block eben. (Beispiel)

  • Ah, ich dumm! Ich habe an gedacht svg als Blockelement. (Irgendwann denke ich…) Ich denke, ich werde mich für a entscheiden display: block.

    – Søren Løvborg

    11. März 2014 um 21:46 Uhr


  • “Danke! Und ich auch!” – Ich war ein paar Minuten lang verwirrt darüber, warum es eine dünne Randlinie gab, als das Inspector-Box-Modell nirgendwo Polsterung oder Rand zeigte, das war das Problem!

    – Vasily Hall

    24. August 2016 um 14:32 Uhr

  • Ich habe gerade hinzugefügt svg { vertical-align: top }. Surprised Bootstrap tut dies nicht. Die zusätzliche Marge war völlig unerklärlich!!!

    – dansch

    6. September 2017 um 19:25 Uhr


  • Ich hatte so ein Problem mit middle. top Ich habe den größten Teil des zusätzlichen Abstands entfernt.

    – Benutzer541686

    19. Juni 2019 um 22:10 Uhr

  • Ich danke dir sehr. Es ist so frustrierend, weil es nirgendwo Polsterung oder Ränder gibt.

    – m4heshd

    23. Juni 2021 um 2:11 Uhr

Ich hatte ein verwandtes Problem, bei dem ich ein div mit einem SVG hatte:

<div id=contents>
    <svg exported from illustrator>
</div>

und es gab riesige Ränder über und unter dem SVG im DIV, sogar mit vertical-align:top im DIV und display:block im SVG.

Ich hatte “width:100%” für die SVGs eingestellt, damit sie die Seite füllen.

Die Lösung war zu setzen “height:100%” für die SVGs. Sie wurden bereits in der richtigen Höhe angezeigt, aber durch das Hinzufügen wurden die seltsamen Ränder beseitigt.

Ich würde gerne wissen, wie und warum das funktioniert hat.

Mein Dokument hatte ein einzelnes SVG-Element, dessen Größe mit dem Fenster geändert wurde. Ich habe CSS verwendet Überlauf versteckt um das Erscheinen von Bildlaufleisten zu verhindern. IE:

    body {
        overflow: hidden;
    }

1071800cookie-checkFalscher Rand auf SVG-Element

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy