Warum funktioniert Margin-Top nicht bei Inline-Elementen, aber bei Inline-Block-Elementen?

Inline vs. Inline-Block: Warum Margin-Top nur mit Inline-Block funktioniert

Die Frage

Bei der Verwendung von HTML und CSS a Der Benutzer versucht, einen oberen Rand für ein

zu erstellen. Element, aber es erscheint nur, wenn die CSS-Eigenschaft display auf inline-block gesetzt ist, nicht, wenn sie auf inline gesetzt ist.

Erklärung

Die CSS-Spezifikation definiert den Unterschied zwischen inline und inline-block wie folgt:

• inline-block: Erstellt einen Blockcontainer auf Inline-Ebene, in dem die Der interne Inhalt des Elements wird als Blockbox formatiert, und das Element selbst wird als Inline-Level-Box formatiert.
• inline: Erzeugt eine oder mehrere Inline-Boxen.

Entscheidend ist, dass die CSS2-Spezifikation besagt, dass Inline-Elemente nur horizontale Ränder berücksichtigen (z. B. margin-left).

Der Unterschied

Der Unterschied liegt darin, wie Inline- und Inline-Block-Elemente behandelt werden:

• Während inline Elemente gelten als echte Inline-Elemente, Inline-Block-Elemente werden als Blöcke behandelt, sind aber optisch inline miteinander.
• Blockebene Elemente (wie Inline-Block) respektieren sowohl horizontale als auch vertikale Ränder, während Inline-Elemente nur horizontale Ränder respektieren.

Auflösung

Deshalb wird im bereitgestellten Fall die Anzeige auf „Inline“ gesetzt das

Das Element wendet nur horizontale Ränder an, was „margin-top“ nicht einschließt. Wenn Sie die Anzeige jedoch auf „inline-block“ setzen, können sowohl horizontale als auch vertikale Ränder angewendet werden, einschließlich „Margin-Top“.

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