Re: Control over collapsing margins

Aryeh Gregor wrote:
>  It doesn't seem like Firefox 3.0.10 does that.  Opera 9.50 Alpha and
>  a packaged Chromium nightly do.  (This is all on Linux.)  See the
>  attached test case: I get margins collapsing in the first case
>  always, the second case never, and the third case only in
>  Opera/Chromium. Things might have changed in more recent
>  Firefox/Opera, of course.

The number that I tested with (just prior to that email) was 0.0001px 
which had the described result. However, upon further testing, it seems 
that Mozilla Firefox will suppress margin collapsing if the margin is, 
at least, 0.00834px in width even if it isn't drawn. Ditto for WIE8 
except that the threshold appears to be 0.01px. Opera and Safari both 
seem to require that the margin is rendered as an actual pixel.

I think that the Firefox implementation is bizarre and the WIE 
implementation slightly less so; if there's going to be a threshold, it 
should be anything greater than zero rather than some arbitrarily small 
number. Opera and Safari make more sense with Safari seeming to be the 
better considering its (proprietary) margin collapsing control 
properties. (After testing one of those properties, I think that 
|suppress| would be a better keyword than |separate| though; it's more 
intuitive and the word that I initially tried to use.)

I tested with the following code:

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">

<html lang="en-Latn">
    <head>

        <title>Demo</title>
        <style type="text/css" media="all">
            * { margin: 0; padding: 0; }
            html { background: silver; font-size: 60px; }
            body { background: lightblue; padding-top: 0.00834px /* 
0.00833px 0.01px 1px */; /* -webkit-margin-top-collapse: separate; */ }
            div:first-child { margin: 1em; background: red; }
            div + div { position: absolute; top: 0; left: 1em; width: 
10em; height: 0.9em; border-top: 0.1em solid orange; background: black; 
color: white; }
        </style>

    </head>
    <body>

        <div>1</div>
        <div>2</div>

    </body>
</html>

— Patrick Garies

Attachments

Received on Wednesday, 29 April 2009 14:39:02 UTC