Margin Top- und Inline-Elemente

In CSS wird die Margin-Eigenschaft verwendet, um den Abstand außerhalb der Ränder eines Elements zu definieren. Allerdings tritt ein häufiges Problem auf, wenn der obere Rand für Inline-Elemente verwendet wird, insbesondere in Firefox.

Das Problem:

Warum scheint der obere Rand für Inline-Elemente ignoriert zu werden? in Firefox?

Die Antwort:

Dieses Verhalten gilt nicht nur für Firefox, sondern ist im CSS definiert 2.1 Spezifikation:

CSS 2.1 Spezifikation zu Randeigenschaften:

„Vertikale Ränder haben keine Auswirkung auf nicht ersetzte Inline-Elemente.“

Erläuterung:

Inline-Elemente wie Text, -Tags und -Tags haben keine definierte Höhe und Breite und werden normalerweise als einzelne Inhaltszeile gerendert. Margin top, eine vertikale Randeigenschaft, versucht, Platz über dem Inline-Element zu schaffen. Da das Inline-Element jedoch keine Höhe hat, um den Rand aufzunehmen, wird es ignoriert.

Schlussfolgerung:

Gemäß der CSS-Spezifikation gilt „margin top“ nicht für Inline-Elemente. Um vertikalen Abstand über Inline-Elementen hinzuzufügen, sollten Sie die Verwendung anderer Optionen wie „line-height“ oder „padding-top“ in Betracht ziehen.