html

css

margin

inline

My question is pretty simple:

Why is the margin top ignored for inline elements in firefox?

Does anyone know?

Solution 1

This is not Firefox-only, and defined in the CSS 2.1 Specification:

8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'

Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.

(Emphasis at the end is mine; margin-top is a vertical margin)

Solution 2

inline elements can apply only margin letf and right but if you are using firefox it also appear margin bottom and top after inspect element but it doesn't apply realy