Heim >Web-Frontend >CSS-Tutorial >Warum gibt es in einem DIV unter meinem SVG zusätzlichen Platz und wie kann ich das beheben?

Warum gibt es in einem DIV unter meinem SVG zusätzlichen Platz und wie kann ich das beheben?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-11 00:28:10334Durchsuche

Why Is There Extra Space Below My SVG in a DIV, and How Can I Fix It?

Zusätzlicher Platz unter SVG in DIV

Beim Anzeigen eines SVG-Elements in einem DIV-Container kann es vorkommen, dass unter dem SVG unerwünschter zusätzlicher Platz erscheint . Dieser Platz kann besonders in Firefox und Chrome auffallen.

Um dieses Problem zu beheben, setzen Sie die Anzeigeeigenschaft des SVG-Elements auf „blockieren“. Hier ist der geänderte Code:

<div>

Durch das Festlegen von display: block weisen Sie das SVG-Element im Wesentlichen an, den gesamten vertikalen Raum innerhalb des übergeordneten DIV-Containers einzunehmen. Dadurch wird der zusätzliche Platz entfernt, der zuvor das SVG-Element an der Grundlinie des umgebenden Textes ausgerichtet hat.

Alternativ können Sie Vertical-Align: Top verwenden, wenn Sie das SVG-Element inline oder inline-block halten müssen. Stellen Sie dabei sicher, dass es oben auf dem DIV-Container sitzt.

Das obige ist der detaillierte Inhalt vonWarum gibt es in einem DIV unter meinem SVG zusätzlichen Platz und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn