376436 - Gecko: CSS margin-top/margin-bottom doesn't work at times, while margin-left/right does.

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[S]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

As a web developer, I run into this all the time. I have yet to figure out why it happens (but the result is always the same). Here is an example of a script that does this:

<span style="margin-top:10px;border-top:1px solid #FF0000;position:absolute;width:94px;"><span style="margin-top:-10px;">STRIKE-OUT</span></span>

The first instance of margin-top works correctly. The second instance however: the text STRIKE-OUT should be shifting up. Neither margin-top or margin-bottom work no matter what value you put in (positive or negative).

However, try this:
<span style="margin-top:10px;border-top:1px solid #FF0000;position:absolute;width:94px;"><span style="margin-left:-10px;">STRIKE-OUT</span></span>

STRIKE-OUT does shift.

Reproducible: Always

Steps to Reproduce:
Er... see Details. But it isn't just that example where the problem occurs. But my guess why it occurs is because of a conflict between it being used previously, nullifying the second use, no matter what the value.
Actual Results:  
See Details.

Expected Results:  
In the first example provide in Details, the text should shift up.

This is not specific to my computer. This is a gecko rendering issue.

There is no true work around to this problem.

Comment 1

[philippe (part-time)]

Span is an inline element. As such, margin-top/bottom have no effect.

Quote from CSS 2.1, under margin-top, margin-bottom
'These properties have no effect on non-replaced inline elements.'
http://www.w3.org/TR/CSS21/box.html#margin-properties

The reason why it 'works' on the first span in your example, is because you made that span a block level element by using position: absolute.