Pourquoi y a-t-il de l'espace supplémentaire sous mon SVG dans un DIV et comment puis-je y remédier ?

Espace supplémentaire sous SVG dans DIV

Lors de l'affichage d'un élément SVG dans un conteneur DIV, vous pouvez rencontrer un espace supplémentaire indésirable apparaissant sous le SVG . Cet espace peut être particulièrement visible dans Firefox et Chrome.

Pour résoudre ce problème, définissez la propriété d'affichage de l'élément SVG sur "block". Voici le code modifié :

<div>

En définissant display: block, vous demandez essentiellement à l'élément SVG d'occuper tout l'espace vertical dans le conteneur DIV parent. Cela supprime l'espace supplémentaire qui alignait auparavant l'élément SVG avec la ligne de base de tout texte environnant.

Vous pouvez également utiliser vertical-align: top si vous devez conserver l'élément SVG en ligne ou en ligne-bloc, tout en vous assurant qu'il se trouve en haut du conteneur DIV.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!