Domanda Come sbarazzarsi di spazio extra sotto svg in elemento div


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>

http://jsfiddle.net/EXLSF/

Nota l'extra red spazio dentro il div sotto il blu svg.

Già provato a settare padding e margin di entrambi gli elementi a 0, ma senza fortuna.


44
2017-07-08 08:19


origine


risposte:


Hai bisogno display: block; sul tuo svg.

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

Questo perché gli elementi di blocco in linea (come <svg> e <img>) sedersi sulla linea di base del testo. Lo spazio extra che stai vedendo è lo spazio rimasto per accogliere i discendenti dei personaggi (la coda su 'y', 'g' ecc.).

Puoi anche usare vertical-align:top se hai bisogno di tenerlo inline o inline-block


84
2017-07-08 08:23



svg è un inline elemento. inline gli elementi lasciano lo spazio bianco.

Soluzione:

Inserisci display:block a svg, o fare altezza del genitore div stesso di svg.

DEMO qui.


8
2017-07-08 08:27



Cambiare il display proprietà dello svg di essere block.


3
2017-07-08 08:23



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>

1
2017-07-08 08:23



Prova ad aggiungere height:100px a div e usando a height="100%" sopra svg:

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

0
2017-07-08 08:22



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


0
2017-07-03 19:47