> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Supprime l’espace sous un SVG en ligne avec CSS

> Détermine si l’espace sous ton SVG vient de la ligne HTML ou du dessin, puis choisis un affichage bloc ou un alignement en ligne et vérifie le résultat.

Source: https://perfectvector.com/fr/blog/inline-svg-baseline-gap

Language: fr
Author: Irene Kim
Published: 2026-10-22T08:00:00+09:00

Un petit espace sous un SVG peut provenir de la ligne HTML qui le contient. Un graphique en ligne participe à la mise en page du texte, où la ligne de base et la hauteur de ligne peuvent laisser de la place sous sa boîte. Pour une image autonome, essaie `display: block`. Pour un graphique qui doit rester à côté du texte, choisis délibérément son alignement en ligne.

Localise d’abord l’espace. Une zone **à l’extérieur de la boîte de l’élément SVG** exige un contrôle de mise en page. Une zone **à l’intérieur de cette boîte** peut appartenir au canevas du SVG ou à ses règles d’ajustement. Retracer un logo ne corrigera pas le premier problème. Ce guide aide à distinguer les deux et à vérifier une petite correction CSS locale.

## Trouve la boîte qui contient l’espace

Donne au SVG et à son conteneur immédiat des arrière-plans contrastés dans les outils de développement du navigateur. Inspecte aussi les contours de leurs éléments. Le fond est une aide de diagnostic temporaire ; il n’a pas besoin de faire partie du dessin livré.

```css
.logo-wrap {
  background: peachpuff;
}

.logo-wrap > svg {
  background: lightgreen;
}
```

Si la couleur pêche se prolonge sous la boîte SVG verte, inspecte la disposition en ligne, les espacements internes, la bordure, la hauteur et les éléments voisins du conteneur. Si le vert se prolonge sous le dessin visible, inspecte le `viewBox`, les limites peintes et la manière dont le dessin s’ajuste au viewport.

Les deux peuvent se produire ensemble. Corriger la boîte de ligne peut retirer une bande fine tout en laissant une marge transparente plus grande dans l’image. Le [guide d’ajustement SVG](https://perfectvector.com/fr/blog/svg-preserveaspectratio) explique l’interaction entre rectangle source et viewport destinataire. Ne resserre pas un `viewBox` avant de savoir que l’espace indésirable est à l’intérieur.

La méthode d’intégration compte aussi. Un `<svg>` en ligne fait partie du document HTML ; un `<img src="logo.svg">` charge une image externe. Leurs limites de stylisation diffèrent, comme l’explique le [guide SVG en ligne et image](https://perfectvector.com/fr/blog/inline-svg-vs-img). Pour ce diagnostic, inspecte l’élément placé dans la rangée HTML au lieu de supposer que chaque fichier SVG est intégré de la même manière.

## Pourquoi la ligne de base peut laisser de l’espace dessous

Les lignes de texte doivent laisser de la place aux lettres qui descendent sous la ligne de base, comme `g` et `p`. Un graphique en ligne peut s’aligner sur cette ligne de base tandis que la ligne qui le contient s’étend encore dessous. Voilà pourquoi remettre la marge de l’image à zéro peut ne rien changer.

[Les règles CSS de calcul de hauteur de ligne](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) déterminent une boîte de ligne à partir des boîtes participantes et de leur alignement. La police et la hauteur de ligne du parent contribuent même lorsque le contenu visible est un graphique. La bande exacte résulte donc des styles environnants plutôt que d’une marge SVG fixe.

Ne confonds pas cette ligne de base avec celle des lettres dessinées *dans* le SVG. Modifier `dominant-baseline` sur un élément de texte SVG agit sur ce texte intérieur. Cela ne choisit pas la position de l’ensemble du graphique dans sa ligne HTML.

### Un exemple mesuré sans canevas SVG vide

Nous avons créé une page HTML originale contenant trois copies du même SVG. Chaque SVG possède un viewBox `240 × 100` rempli bord à bord par un rectangle et s’affiche à `240 × 100` pixels CSS. Les rangées utilisent Arial à `40px` avec une hauteur de ligne de `48px`. Seul l’affichage ou l’alignement du SVG change.

Le navigateur a renvoyé ces mesures d’éléments :

| Traitement du SVG                     | Hauteur du SVG | Hauteur de rangée | Espace sous la boîte SVG |
| ------------------------------------- | -------------- | ----------------- | ------------------------ |
| En ligne, aligné sur la ligne de base | 100px          | 110.5px           | 10.5px                   |
| Affichage bloc                        | 100px          | 100px             | 0px                      |
| En ligne, aligné en bas               | 100px          | 100px             | 0px                      |

![Comparaison dans le navigateur du même SVG plein, avec une bande de 10,5 pixels sous sa version en ligne sur la ligne de base et aucune bande pour les versions bloc et alignée en bas](https://perfectvector.com/blog/inline-svg-baseline-gap/line-box-comparison.webp)

*Le rectangle peint remplit chaque SVG. La bande pêche sous la première boîte verte appartient à sa rangée HTML, pas à un espace supplémentaire dans le viewBox.*

Ce sont les mesures de cette page dans un navigateur, pas une promesse d’un espace de 10.5px dans toutes les mises en page. Nous avons comparé la coordonnée basse du conteneur à celle du SVG. La hauteur du SVG restait de 100px dans les trois cas : la correction n’a donc ni réduit ni rogné le dessin.

## Utilise l’affichage bloc pour un graphique autonome

Lorsque le logo doit occuper sa propre rangée, applique la règle de mise en page à cette image précise :

```css
.brand-mark {
  display: block;
  width: 240px;
  height: auto;
}
```

[La référence display de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) distingue la participation en bloc et en ligne dans le flux. Transformer le SVG en bloc supprime son rôle d’élément en ligne dans la ligne de texte environnante. Cela ne modifie pas les chemins source et ne retire pas les marges transparentes du dessin.

Revérifie le conteneur après application de la règle. S’il s’étend toujours sous l’image, cherche une hauteur explicite, un espacement interne, un autre enfant, un pseudo-élément ou une ligne supplémentaire. Un saut de ligne ou nœud de texte après un graphique bloc peut introduire son propre contenu. Un ancêtre peut aussi être responsable de l’espace visible.

Garde un sélecteur ciblé. Appliquer `svg { display: block; }` à tout un site peut déplacer des icônes volontairement placées dans des libellés ou phrases. Choisis le composant qui nécessite un graphique autonome, puis inspecte ses autres utilisations.

## Garde les graphiques de texte en ligne et choisis l’alignement

Pour une icône ou un petit signe à côté de mots, le conserver en ligne peut être la disposition prévue. `vertical-align: bottom` aligne son bord de marge inférieur sur le bas de la ligne. `vertical-align: middle` utilise la ligne de base et la hauteur d’x du parent ; ce n’est pas une commande de centrage géométrique de toute image dans tout conteneur. Consulte les [définitions vertical-align de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align).

```css
.label-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
```

Choisis entre ces valeurs en inspectant le véritable libellé et sa police. Une icône qui touche le bas d’une ligne peut sembler trop basse à côté de capitales. Un signe aligné avec `middle` peut encore exiger un ajustement optique parce que son dessin visible est réparti inégalement dans sa propre boîte.

Le cas aligné en bas de notre exemple ne contenait que le graphique. Il prouve que cet alignement supprimait la bande dans cette rangée précise. Il n’établit pas que chaque rangée mêlant texte et icône aura la même hauteur ou apparence.

Évite `line-height: 0` sur un conteneur de texte partagé comme première correction. Cela change la disposition du texte autant que l’espacement de l’image. Le symptôme immédiat peut disparaître tout en laissant le composant dépendre de surcharges ultérieures lorsqu’un libellé est ajouté. Sélectionne l’affichage ou l’alignement prévu avant de changer la typographie d’un parent.

## Vérifie la correction sans changer le dessin

Effectue une modification à la fois, puis vérifie :

1. **Limite de l’élément :** l’espace visible est-il maintenant à l’intérieur ou à l’extérieur de la boîte SVG ?
2. **Dimensions :** le SVG a-t-il conservé sa largeur, sa hauteur et ses proportions prévues ?
3. **Voisins :** libellés, liens et icônes sont-ils toujours à leur place ?
4. **Mise en page responsive :** le composant se comporte-t-il correctement aux tailles étroites et larges ?
5. **Styles calculés :** la déclaration souhaitée l’emporte-t-elle ou une règle plus spécifique la remplace-t-elle ?

Pour un conteneur simple sans bordure ni espacement interne, comparer sa coordonnée basse à celle de l’image est un contrôle utile. Dans un vrai composant, tiens compte des espacements volontaires et autres contenus avant de qualifier la différence d’erreur.

Si la page exige un autre agencement sur les petits écrans, vérifie-le aussi. Une correction adaptée à un logo isolé peut ne pas convenir à une rangée de navigation dont le texte revient à la ligne. Retire les couleurs de fond temporaires une fois la limite comprise.

## Quand la vectorisation aide ce flux

Un SVG éditable existant nécessite généralement ici une correction CSS ou de canevas. Garde ce fichier et diagnostique son placement avant de le reconstruire.

Si le signe lui-même n’existe qu’en PNG ou JPG et nécessite des contours éditables, [utilise PerfectVector pour convertir l’image source en dessin vectoriel](https://perfectvector.com/fr/image-to-vector), puis inspecte le contour, les ouvertures et le canevas source avant de placer le résultat sur la page. La [grille d’évaluation de qualité de vectorisation](https://perfectvector.com/fr/blog/evaluate-vector-trace-quality) aide à ce contrôle géométrique séparé. La vectorisation prépare les formes ; le CSS de la page contrôle toujours la boîte de ligne HTML.

## FAQ

**Pourquoi margin: 0 ne retire-t-il pas l’espace sous mon SVG ?**
L’espace peut appartenir à la ligne de texte qui le contient plutôt qu’aux marges du SVG. Inspecte les limites du SVG et du conteneur, puis teste l’affichage bloc pour une image autonome ou un alignement vertical adapté à un graphique en ligne.

**display: block rogne-t-il l’espace blanc du SVG ?**
Non. Cela change la participation de l’élément à la mise en page HTML. L’espace vide à l’intérieur du viewBox reste présent et exige un contrôle séparé du dessin ou de l’ajustement.

**Faut-il utiliser vertical-align: bottom ou middle ?**
Utilise la valeur adaptée à la vraie rangée. Bottom s’aligne sur le bas de la ligne ; middle utilise la ligne de base et la hauteur d’x du parent. Inspecte le résultat avec sa police finale et son texte voisin au lieu de considérer l’une ou l’autre valeur comme un centrage universel.

## Sources

1. [W3C — Hauteur de ligne et alignement vertical CSS](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) — Contribution des boîtes participantes, de l’alignement et de la typographie parent à la hauteur de ligne.
2. [MDN — display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) — Différence entre participation en bloc et en ligne dans le flux.
3. [MDN — vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align) — Alignements baseline, bottom et middle et boîtes auxquelles s’applique la propriété.

***

Tu pars d’un signe uniquement matriciel ? [Prépare des formes SVG éditables](https://perfectvector.com/fr/image-to-vector), compare leurs contours et leur canevas à la source, puis vérifie le placement du SVG dans le véritable composant de page.

## Explore

- [Read the HTML article](https://perfectvector.com/fr/blog/inline-svg-baseline-gap)
- [Logo SVG : réserve sa place pour éviter les décalages](https://perfectvector.com/fr/blog/svg-logo-layout-reservation.md)
- [Logo SVG en mode sombre : qui contrôle la couleur ?](https://perfectvector.com/fr/blog/dark-mode-svg-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)