20

My question is pretty simple:

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

Does anyone know?

Rob W
  • 341,306
  • 83
  • 791
  • 678
Tony
  • 10,088
  • 20
  • 85
  • 139
  • 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. – powerbuoy Apr 25 '12 at 22:25
  • Is inline-block cross browser? – Tony Apr 25 '12 at 22:40
  • It works in everything but older versions of IE. But inline might work in those browsers. Not sure. – powerbuoy Apr 25 '12 at 22:42

2 Answers2

27

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)

Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • 7
    What are "non-replaced"? Is there a good reason for this restriction? – Tony Apr 25 '12 at 22:39
  • 8
    @Tony Examples of replaced (inline) elements are textareas and images. Non-replaced inline elements are inline elements which are not a [replaced element](http://reference.sitepoint.com/css/replacedelements). – Rob W Apr 26 '12 at 08:53
  • 2
    The replaced elements link is invalid, here's another one: https://stackoverflow.com/questions/8012297/html5-non-replaced-vs-replaced-element – Al.G. Jul 15 '20 at 08:16
-1

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

anjana784
  • 1
  • 1