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

# Lücke unter Inline-SVG: Behebe sie im CSS-Layout

> Finde heraus, ob der Raum unter deinem SVG zur HTML-Zeilenbox oder zur Grafik gehört. Wähle Blockdarstellung oder Inline-Ausrichtung und prüfe das Ergebnis.

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

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

Eine schmale Lücke unter einem SVG kann von der HTML-Zeile stammen, in der es liegt. Eine Inline-Grafik nimmt am Textlayout teil; Grundlinie und Zeilenhöhe können Raum unter ihrer Box lassen. Probiere für ein eigenständiges Bild `display: block`. Soll die Grafik neben Text bleiben, wähle ihre Inline-Ausrichtung bewusst.

Lokalisiere zuerst die Lücke. Raum **außerhalb der SVG-Elementbox** braucht eine Seitenlayoutprüfung. Raum **innerhalb der Box** kann zur SVG-Zeichenfläche oder ihren Einpassungsregeln gehören. Erneute Logovektorisierung repariert das erste Problem nicht. Dieser Leitfaden trennt beide Fälle und hilft, eine kleine lokale CSS-Korrektur zu prüfen.

## Finde die Box mit dem Leerraum

Gib SVG und unmittelbarem Wrapper in den Browser-Entwicklerwerkzeugen kontrastierende Hintergründe. Prüfe auch die Elementumrisse. Die Farben sind vorübergehende Diagnosehilfe und müssen nicht Teil der gelieferten Grafik werden.

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

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

Reicht die Pfirsichfarbe unter die grüne SVG-Box, kontrolliere Zeilenlayout, Padding, Rahmen, Höhe und Nachbarelemente des Wrappers. Reicht Grün unter die sichtbare Zeichnung, prüfe `viewBox`, gemalte Grenzen und Einpassung in den Viewport.

Beides kann gleichzeitig vorkommen. Die Zeilenboxkorrektur entfernt eventuell einen dünnen Streifen, während ein größerer transparenter Innenrand bleibt. Der [Leitfaden zur SVG-Einpassung](https://perfectvector.com/de/blog/svg-preserveaspectratio) erklärt das Verhältnis von Quellrechteck und Zielviewport. Verkleinere eine `viewBox` erst, wenn der ungewollte Raum tatsächlich darin liegt.

Auch die Einbettung zählt. Ein Inline-`<svg>` gehört zum HTML-Dokument; `<img src="logo.svg">` lädt ein externes Bild. Ihre Stilgrenzen unterscheiden sich, wie der [Vergleich von Inline-SVG und Bild](https://perfectvector.com/de/blog/inline-svg-vs-img) erklärt. Prüfe das Element in der HTML-Zeile, statt jede SVG-Datei für gleich eingebettet zu halten.

## Warum die Grundlinie Raum darunter lassen kann

Textzeilen brauchen Platz für Unterlängen wie bei `g` und `p`. Eine Inline-Grafik kann an dieser Grundlinie ausgerichtet sein, während die umgebende Zeile darunter weiterreicht. Deshalb muss das Zurücksetzen des Bild-Margins auf null nichts ändern.

[Die CSS-Regeln zur Zeilenhöhenberechnung](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) bestimmen die Zeilenbox aus beteiligten Boxen und ihrer Ausrichtung. Schrift und Zeilenhöhe des Elternelements wirken auch dann mit, wenn nur eine Grafik sichtbar ist. Der genaue Streifen ist somit Folge der umgebenden Stile, kein fester SVG-Rand.

Verwechsle diese Grundlinie nicht mit der von Schrift *innerhalb* des SVGs. `dominant-baseline` an einem SVG-Textelement ändert diese innere Schrift. Es legt nicht fest, wie die gesamte Grafik in ihrer HTML-Zeile sitzt.

### Ein gemessenes Beispiel ohne leere SVG-Zeichenfläche

Wir erstellten eine HTML-Seite mit drei Kopien desselben SVGs. Jede hat eine `240 × 100`-viewBox, vollständig von einem Rechteck gefüllt, und wird mit `240 × 100` CSS-Pixeln dargestellt. Die Zeilen nutzen Arial mit `40px` und `48px` Zeilenhöhe. Nur Display oder Ausrichtung des SVGs ändern sich.

Der Browser lieferte diese Elementmaße:

| SVG-Behandlung             | SVG-Höhe | Zeilenhöhe | Raum unter der SVG-Box |
| -------------------------- | -------- | ---------- | ---------------------- |
| Inline, an Grundlinie      | 100px    | 110.5px    | 10.5px                 |
| Blockdarstellung           | 100px    | 100px      | 0px                    |
| Inline, unten ausgerichtet | 100px    | 100px      | 0px                    |

![Browservergleich desselben gefüllten SVGs mit 10.5-Pixel-Streifen unter der Inline-Grundlinienversion und ohne Streifen bei Block- und unterer Ausrichtung](https://perfectvector.com/blog/inline-svg-baseline-gap/line-box-comparison.webp)

*Das gemalte Rechteck füllt jedes SVG. Der pfirsichfarbene Streifen unter der ersten grünen Box gehört zur HTML-Zeile, nicht zu zusätzlichem Raum in der viewBox.*

Das sind Messungen dieser Seite in einem Browser, keine Zusage einer 10.5px-Lücke in jedem Layout. Wir verglichen die Unterkante des Wrappers mit der des SVGs. Die SVG-Höhe blieb in allen Fällen 100px; die Korrektur verkleinerte oder beschnitt die Zeichnung nicht.

## Nutze Blockdarstellung für eigenständige Grafik

Soll das Logo eine eigene Zeile belegen, lege die Layoutregel gezielt an diesem Bild fest:

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

[MDNs display-Referenz](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) unterscheidet Block- und Inline-Teilnahme am normalen Fluss. Eine SVG-Blockdarstellung entfernt seine Rolle als Inline-Element in der Textzeile. Sie bearbeitet weder Quellpfade noch transparente Grafikränder.

Prüfe danach den Wrapper erneut. Reicht er weiter nach unten, suche feste Höhe, Padding, weiteres Kind, Pseudoelement oder zusätzliche Zeile. Ein Zeilenumbruch oder Textknoten nach einer Blockgrafik kann eigenen Inhalt hinzufügen. Auch ein Vorfahre kann den sichtbaren Raum verursachen.

Halte den Selektor eng. Ein globales `svg { display: block; }` kann Symbole verschieben, die absichtlich in Beschriftungen oder Sätzen stehen. Wähle die Komponente mit eigenständiger Grafik und prüfe ihre anderen Einsätze.

## Lass Textzeilengrafik inline und wähle die Ausrichtung

Für ein Symbol oder kleines Zeichen neben Wörtern kann Inline richtig sein. `vertical-align: bottom` richtet seine untere Marginkante am unteren Zeilenrand aus. `vertical-align: middle` nutzt Grundlinie und x-Höhe des Elternelements; es zentriert nicht jedes Bild geometrisch in jedem Container. Siehe [MDNs vertical-align-Definitionen](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align).

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

Wähle anhand der tatsächlichen Beschriftung und Schrift. Ein am Zeilenboden anliegendes Symbol kann neben Großbuchstaben zu tief wirken. Auch `middle` kann optische Korrektur brauchen, wenn die sichtbare Grafik in ihrer Box ungleichmäßig verteilt ist.

Der unten ausgerichtete Beispielfall enthielt nur die Grafik. Er belegt das Entfernen des Streifens in genau dieser Zeile, nicht identische Höhe oder Erscheinung jeder gemischten Text-Symbol-Zeile.

Vermeide `line-height: 0` an einem gemeinsam genutzten Textcontainer als erste Reparatur. Das ändert Textlayout und Bildabstand. Es kann das Symptom verdecken und die Komponente von späteren Überschreibungen abhängig machen, sobald eine Beschriftung hinzukommt. Wähle Display oder Ausrichtung vor einer Änderung der Elterntypografie.

## Prüfe die Korrektur ohne Grafikänderung

Ändere jeweils nur eine Sache und kontrolliere:

1. **Elementgrenze:** Liegt die sichtbare Lücke jetzt innerhalb oder außerhalb der SVG-Box?
2. **Maße:** Behält das SVG gewünschte Breite, Höhe und Proportionen?
3. **Nachbarn:** Sitzen Beschriftungen, Links und Symbole weiterhin richtig?
4. **Responsives Layout:** Funktioniert die Komponente in schmaler und breiter Größe?
5. **Berechnete Stile:** Gewinnt die gewünschte Regel oder überschreibt eine spezifischere sie?

Bei einem einfachen Wrapper ohne Rahmen oder Padding hilft der Vergleich von Bild- und Wrapper-Unterkante. Berücksichtige in realen Komponenten absichtliches Padding und weitere Inhalte, bevor du eine Differenz als Fehler einstufst.

Braucht die Seite bei kleinen Bildschirmen eine andere Anordnung, prüfe auch diese. Eine Korrektur für ein isoliertes Logo passt womöglich nicht zu Navigation mit umbrechendem Text. Entferne temporäre Hintergrundfarben, sobald die Grenze klar ist.

## Wann Vektorisierung hier hilft

Ein vorhandenes bearbeitbares SVG braucht hier meist eine CSS- oder Zeichenflächenkorrektur. Bewahre die Datei und diagnostiziere ihre Platzierung, bevor du sie rekonstruierst.

Existiert das Zeichen nur als PNG oder JPG und braucht bearbeitbare Konturen, [wandle die Quelle mit PerfectVector in Vektorgrafik um](https://perfectvector.com/de/image-to-vector). Prüfe dann Kontur, Öffnungen und Quellzeichenfläche vor der Seitenplatzierung. Der [Bewertungsbogen zur Vektorisierungsqualität](https://perfectvector.com/de/blog/evaluate-vector-trace-quality) hilft bei dieser separaten Geometrieprüfung. Vektorisierung bereitet Formen vor; das Seiten-CSS steuert weiterhin die HTML-Zeilenbox.

## FAQ

**Warum entfernt margin: 0 die Lücke unter dem SVG nicht?**
Der Raum kann zur umgebenden Textzeile statt zu SVG-Margins gehören. Prüfe SVG- und Wrapper-Grenzen und teste Blockdarstellung für ein einzelnes Bild oder passende vertikale Ausrichtung für Inline-Grafik.

**Schneidet display: block Leerraum im SVG ab?**
Nein. Es ändert die Teilnahme am HTML-Layout. Leerraum in der viewBox bleibt und braucht eine separate Grafik- oder Einpassungsprüfung.

**Soll ich vertical-align: bottom oder middle nutzen?**
Nutze den Wert für die tatsächliche Zeile. Bottom richtet unten aus; middle nutzt Grundlinie und x-Höhe des Elternteils. Prüfe mit endgültiger Schrift und Nachbartext, statt einen Wert für universelle Zentrierung zu halten.

## Quellen

1. [W3C — CSS-Zeilenhöhe und vertikale Ausrichtung](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) — Beiträge von Boxen, Ausrichtung und Elterntypografie zur Zeilenhöhe.
2. [MDN — display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) — Unterschied zwischen Block- und Inline-Teilnahme am Flusslayout.
3. [MDN — vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align) — Baseline, Bottom und Middle sowie betroffene Boxen.

***

Du beginnst mit einer Rastermarke? [Bereite bearbeitbare SVG-Formen vor](https://perfectvector.com/de/image-to-vector), vergleiche Konturen und Zeichenfläche mit der Quelle und prüfe die SVG-Platzierung in der tatsächlichen Seitenkomponente.

## Explore

- [Read the HTML article](https://perfectvector.com/de/blog/inline-svg-baseline-gap)
- [SVG-Logos ohne Layoutsprünge: Reserviere ihren Platz](https://perfectvector.com/de/blog/svg-logo-layout-reservation.md)
- [SVG-Logo im Dark Mode: Wer steuert die Farben?](https://perfectvector.com/de/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)