[Prev][Next][Index][Thread]
Negative margins
I'm having trouble figuring out how negative margins
on block-level elements should work. According to
section 4.1 of the spec, the top and bottom margins
between two block-level elements should work as follows:
XXXXXXXXXXXXXXX
XX element A XX
XXXXXXXXXXXXXXX
the space here is the max of
<-- the bottom margin of A and the
top margin of B.
XXXXXXXXXXXXXXX
XX element B XX
XXXXXXXXXXXXXXX
This is fine for positive values, but it gets hard to know
what to do for negative values. Let's say that the bottom
margin of A is 50px, and that the top margin of B is -10px.
Here are some possibilities:
1.1) Follow the spec literally.
50px > -10px, thus the space between is 50px.
1.2) Add the two.
50px-10px = 40px, so the space between is 40px.
Solution (1.2) is attractive because it seems to capture the
web author's intentions. By specifying a space-before of
-10px, he or she is probably saying "I want 10 pixels less
space than I would otherwise get." Now, consider the
situation when both are negative. Say the space after A is
-10px, and that the space before B is -20.
2.1) Follow the spec literally.
-10px > -20px, thus the space between is -10px.
2.2) Instead of using max(a,b), -max(-a,-b).
20px > 10px, thus the space between is -20px.
2.3) Add the two.
(-10px) + (-20px) = -30px, thus the space between is -30px.
Of these, I like (2.2) the best. It goes along with the spirit
of using max(a,b) for positive values.
So, combining (1.2) and (2.2), the algorithm to compute the
space between block-level elements would be:
if (a >= 0 && b>= 0)
space = max(a,b);
else if ( (a >= 0 && b < 0) || (a < 0 && b >= 0) )
space = a+b;
else // a < 0 && b < 0
space = -max(-a,-b);
Any thoughts?
-Sho