398508 - Margin collapsing rule issue.

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Biju]

Attachment: fx_margin_issue.png

Margin collapsing rule issue.

First case in the attached screenshot is of an HTML 
page with just a DIV and a H1 tag inside it.
Background color the body is blue and for DIV is yellow.
margin and padding for both is 0px.
H1 tag has the standard margin-top 20px;
(we do not need to set margin-top:20px for H1
just did it to compare with IE)

Issues. 

 1.
Why there is a blue space at the top of the page?
   (there is no other element before DIV, 
    to show body's bg-color)

 2.
Why there is a scroll bar?
   (other than 100% sized DIV there is no other 
    element in body, to exceed page size than 
    the window size)

In IE it looks fine, so is this IE violating CSS std 
or is it a mozilla bug!!

I tried to put a <br> before H1, then the issue get 
solved but with a side effect of space for line break.
IE ignore this line break also.

adding 
<div style="height:1px"></div> before H1
almost solves the issue in firefox with 1 px offset.
but now IE produce an extra space one line break.
I have not tested in other browsers.

The issue may also exist when the last element have
a margin-bottom.
We may also need testing for margin-left and margin-right
also for padding in all those cases

Comment 1

[Biju]

Attachment: test1.html

Comment 2

[Biju]

Attachment: test2.html

Comment 3

[Biju]

Attachment: test3.html

Comment 4

[Biju]

Attachment: test4.html

Comment 5

[Biju]

Attachment: ie_margin_ok.png

Comment 6

[Biju]

Attachment: test5.html

with <div style="height:1px"></div> before H1

Comment 7

[Biju]

Attachment: fx_ie_solution_test6.html

Comment 8

[Biju]

Attachment: fx_ie_solution_test6x.html

Work arround which is good for IE6 and Firefox is adding following div/br combination at the beginning and end. I also work for XHTML Strict mode

<div class="size0"><br class="size0"/></div> 

<style>
.size0 {
 height:0px;
 line-height:0px;
 font-size: 0px;
 padding:0px;
 margin:0px; 
}
</style>

Comment 9

[Biju]

Attachment: fx_issue_test1x.html

HTML Strict issue example

Comment 10

[Biju]

Attachment: fx_issue_test1x.png

Comment 11

[Daniel.S]

Thank you for reporting your issue. However, this is no bug.

test1, test3: Here, the h1's top-margin collapses through the top of the div, so the body's background is shown and the element is shifted down by the size of the margin (thus you see a scrollbar).

test2, test4, test5: Since there's an element between the div and the h1, the h1's marhin can't collapse. You can see the line created by br/1px-div and the top margin of h1.

test6: top and bottom margins normally collapse. A workaround is to simply use padding. The size0 class seems rather hacky.