Warum funktioniert Margin-Top nicht bei Inline-Elementen in HTML?

Margin-Top funktioniert nicht für Inline-Elemente: Inline-Verhalten verstehen

In HTML werden Elemente wie werden im Gegensatz zu Elementen auf Blockebene wie

als Inline-Elemente betrachtet. oder

. Elemente auf Blockebene können Ränder auf allen Seiten akzeptieren, während Inline-Elemente nur horizontale Ränder zulassen.

Die CSS-Randeigenschaften legen die Breite des Randbereichs um ein Element fest. Bei der Anwendung auf Elemente auf Blockebene wirken sich Ränder auf alle vier Seiten aus. Für Inline-Elemente wie sind vertikale Ränder jedoch unwirksam.

Gemäß der CSS-Spezifikation „haben vertikale Ränder keine Auswirkung auf nicht ersetzte Inline-Elemente.“

Lösung:

Um vertikale Ränder auf einem Inline-Element wie zuzulassen, ändern Sie es seine Anzeigeeigenschaft entweder auf „inline-block“ oder „block“.

Inline-Block:

• Ermöglicht dem Element, sich inline zu verhalten, aktiviert es aber auch vertikale Ränder.
• Beispiel:

Block:

• Konvertiert das Element in ein Element auf Blockebene und ermöglicht vertikale und horizontale Ränder.
• Beispiel :

Es wird empfohlen, display: inline-block für Inline-Elemente zu verwenden, die vertikale Ränder erfordern, als display: block kann dazu führen, dass das Element in einer separaten Zeile erscheint.

Das obige ist der detaillierte Inhalt vonWarum funktioniert Margin-Top nicht bei Inline-Elementen in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

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