Come sbarazzarsi dello spazio extra sotto svg nell'elemento div

93

Ecco un'illustrazione del problema (testato in Firefox e Chrome):

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

Espandi lo snippet

Visualizza su JSFiddle

Notare lo redspazio extra all'interno divdel blu sotto svg.

Già provato l'impostazione paddinge margindi entrambi gli elementi 0, ma senza fortuna.

html css svg

— Daniel
fonte

Sembra essere correlato a un problema simile con le immagini, ad esempio stackoverflow.com/questions/7774814/… .

— Daniel

182

Hai bisogno display: block;del tuo svg.

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

Questo perché gli elementi inline-block (come <svg>e <img>) si trovano sulla linea di base del testo. Lo spazio extra che vedi è lo spazio rimasto per accogliere i discendenti dei personaggi (la coda su "y", "g" ecc.)

Puoi anche usare vertical-align:topse devi tenerlo inlineoinline-block

— Andy
fonte

Sorprendente. Quindi tutti gli elementi in linea aggiungono spazio bianco in basso?

— clapas

2

La spiegazione è che inline-blockelementi (come <svg>e <img>) si trovano sulla linea di base del testo. Lo spazio extra che vedi è lo spazio rimasto per accogliere i discendenti dei personaggi (la coda su "y", "g" ecc.).

— Paul LeBeau

1

Preferireivertical-align:top

— John Xiao

Ero convinto che lo spazio extra fosse qualcosa a che fare con line-height, ma l'impostazione line-height: 0su svg e / o il suo contenitore non ha fatto differenza. L' display: blockho solo risolto. Questo è un vero trucchetto se ti capita di lavorare su un grande SVG perché non lo considereresti mai in linea. Se hai una piccola icona, però, ha senso.

— devuxer

display: blocknon ha funzionato per me, ma vertical-alignha funzionato

— Jay

12

svgè un inlineelemento. inlinegli elementi lasciano uno spazio bianco.

Soluzione:

Aggiungere display:blockal svg, o l'altezza marca di genitore div stesso svg.

DEMO qui.

— Hiral
fonte

5

Un'altra alternativa è aggiungere font-size: 0a svg parent.

— Ângelo Lucas
fonte

3

Modificare la displayproprietà del file svg in essere block.

— Malachia
fonte

1

Prova ad aggiungere height:100pxad dive utilizzando un height="100%"on svg:

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

— danrodi
fonte

4

Grazie per il tuo commento. Funziona bene, ma diventa complicato quando non si conosce svgin anticipo l'altezza del .

— Daniel

1

aggiungi semplicemente l'altezza all'elemento div principale

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

— Farshad
fonte

0

Cambia il tuo stile in

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

— jcdsvg
fonte