Wie man zusätzlichen Raum unter Svg im div Element loswird

Ist hier eine Abbildung des Problems (getestet in Firefox und Chrome):

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

http://jsfiddle.net/EXLSF/

Beachten Sie die extra red Raum innerhalb der div unterhalb der blauen svg.

Schon versucht die Einstellung padding und margin beider Elemente zu 0aber ohne Glück.

InformationsquelleAutor der Frage Daniel | 2014-07-08

  1. 82

    Müssen Sie display: block; auf Ihre svg.

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

    Dies ist, weil inline-block-Elemente (wie <svg> und <img>) setzen sich auf die text-Grundlinie. Der zusätzliche Raum, den Sie sehen, ist der Raum, um Platz für Charakter-absteiger (den Schwanz auf 'y', 'g', etc).

    Können Sie auch vertical-align:top wenn Sie brauchen, um es zu halten inline oder inline-block

    InformationsquelleAutor der Antwort Andy

  2. 8

    svg ist ein inline element. inline Elemente lassen white-space.

    Lösung:

    Hinzufügen display:block zu svg oder machen Sie die Höhe des übergeordneten div gleichen wie svg.

    DEMO hier.

    InformationsquelleAutor der Antwort Hiral

  3. 3

    Ändern Sie die display - Eigenschaft des svg zu werden block.

    InformationsquelleAutor der Antwort Malachi

  4. 1

    einfach fügen Höhe an Haupt-div-element 

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

    InformationsquelleAutor der Antwort Farshad

  5. 0

    Versuchen Sie height:100px zu div und mit einem height="100%" auf svg:

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

    InformationsquelleAutor der Antwort danrodi

  6. 0

    Andere alternative ist, fügen Sie font-size: 0 zu svg Eltern.

    InformationsquelleAutor der Antwort Ângelo Lucas

Schreibe einen Kommentar