Margin top in inline element

Question

My question is pretty simple:

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

Does anyone know?

Eastsoutheast

It's not just margin that doesn't work the same with inline elements as with blocks, padding is also treated differently. You can use inline-block instead to solve it. – Decoteau

Is inline-block cross browser? – Eastsoutheast

It works in everything but older versions of IE. But inline might work in those browsers. Not sure. – Decoteau

Answer 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)}

Weep

What are "non-replaced"? Is there a good reason for this restriction? – Eastsoutheast

@Eastsoutheast Examples of replaced (inline) elements are textareas and images. Non-replaced inline elements are inline elements which are not a replaced element. – Weep

The replaced elements link is invalid, here's another one: #8012797 – Sauna

Answer 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

Bromberg