Warum funktioniert Margin-Top nicht bei Inline-Elementen in HTML?-CSS-Tutorial-php.cn

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

Linda Hamilton

Freigeben： 2024-12-16 17:51:12

Original

140 Leute haben es durchsucht

Why Doesn't Margin-Top Work on Inline Elements 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!