3

I am using Firefox3 on Ubuntu (And I found a bug in SO while at that :-D) The expected behavior is not to see any margin between the DIVs, while a margin is shown, originating from the P margins.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <style>
        p{
            background-color: transparent;
            margin: 10px;
            color: white;
        }
        div{
            background-color: black;
            margin:0;
            width: 300px;
        }
   </style>
</head>
<body>
   <div>
        <p>aaaaaaaaaaa</p>
        <p>bbbbbbbbbbb</p>
        <p>ccccccccccc</p>
   </div> 
   <div>
        <p>aaaaaaaaaaa</p>
        <p>bbbbbbbbbbb</p>
        <p>ccccccccccc</p>
   </div> 
</body>
</html>
Itay Moav -Malimovka
  • 52,579
  • 61
  • 190
  • 278
  • I would be useful for you to show a picture, and to spend some effort describing what you expected to see and why you think what you're seeing instead is a bug. – Rob Kennedy Mar 26 '09 at 14:26
  • You already filed a bug in bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=485352 What exactly is your question then? – RuudKok Mar 26 '09 at 14:32
  • I filed the bug after I got answer on another place, It is OK. – Itay Moav -Malimovka Mar 26 '09 at 14:39
  • 1
    @Itay Moav Please don't ask a question at multiple places(bugzilla,so,unnamed) in parallel. All you do is multiply effort. what you've done is rude, and even more so as you did not link to the other questions. – phihag Mar 26 '09 at 15:18
  • Are you filling fine? I can ask wherever I want, Who ever I want and how many times I want. Who put you police man? This site has no precedence on any others I work with. – Itay Moav -Malimovka Mar 26 '09 at 16:19

3 Answers3

14

This is the behaviour as it is defined in the CSS box model:

8.3.1 Collapsing margins

In this specification, the expression collapsing margins means that adjoining margins (no padding or border areas separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

In CSS2, horizontal margins never collapse.

Vertical margins may collapse between certain boxes:

  • Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the absolute maximum of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero.
  • Vertical margins between a floated box and any other box do not collapse.
  • Margins of absolutely and relatively positioned boxes do not collapse.

http://www.w3.org/TR/CSS2/box.html

The rationale behind this might be, that if you set a (vertical) margin on something, you just want to ensure that there is at least this much space left between the border or padding of this element and the border or padding of the next element (e.g. two paragraphs).

If you want the margin to be contained in the div (i.e. making the div expand), you need to set some padding or border at the top and bottom of the div.

Simon Lehmann
  • 10,737
  • 4
  • 41
  • 53
0

I've just checked that with FF on Windows and the p elements are contained as they should be and not outside the div. It looks ok on IE7 as well.

Try playing around with borders set on all the elements and see exactly what happens.

Sorry I can't be of more help.

SirDemon
  • 1,758
  • 15
  • 24
  • the p elements are contained, but try varying their margin: It modifies the distance between the divs – phihag Mar 26 '09 at 14:32
0

As Simon Lehmann wrote, this is the correct behaviour. It looks like what you are looking for is p{padding:100px;}.

Community
  • 1
  • 1
phihag
  • 278,196
  • 72
  • 453
  • 469