Closed Bug 275018 Opened 20 years ago Closed 20 years ago

CSS "margin" of an block HTML element is assigned to it's parent container by mistake

Categories

(Core :: Layout: Block and Inline, defect)

Product:
Core
Component:
Layout: Block and Inline
Platform:
x86
All
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
VERIFIED INVALID

People

(Reporter: melop_cui, Unassigned)

Details

(Keywords: testcase)

Attachments

(3 files)

html file that shows the css margin bug
4.79 KB, text/html
Details
Testcase2, with clear:both on H1
633 bytes, text/html
Details
Test 3, cleared, but margin still to its parent
629 bytes, text/html
Details 
The following XHTML file do not give an expected result:

<?xml version="1.0" encoding="gb2312"?>
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css layout</title>
<style type="text/css">
body {
  font-family: georgia;
  margin:0;
  padding:0;
  
}
div#header {
  border-bottom: 1px solid #000;
  background-color:#2244aa;
  border:0px solid #ff0000;
  width:100%;
  height:130px;
  margin-top:0px; /* #header's margin should be 0 */
}

div#header h1 {
  margin-top:20px; /*20px of margin should be given to <H1>, 
                     but is now given to #header by mistake
                    */
  padding:0px;
}

</style>
</head>
<body>

<div id="header">
 <h1>The header</h1>
</div>

</body>
</html>

    
  

        Attachment #168951 -
        Attachment description: html file shows the css margin bug → html file that shows the css margin bug

    
  
Summary: CSS "margin" of an HTML element is assigned to it's parent container by mistake → CSS "margin" of an block HTML element is assigned to it's parent container by mistake

    
    

    
  
This issue only affects the block element nested inside another block element.
And should be the first Child of it(in the first line).

For example:
<div style="background-color:#2244aa">
  <p style="margin-top:10px">aaa</p>
</div>

The in-line elements are not affected, actually, it seems that mozilla doesn't 
allow defining margin or padding or height of an inline element. (CSS Standard?)

This bug disappears when the container's border doesn't equal to 0:

<div style="border:1px solid #ff0000;background-color:#2244aa">
  <p style="margin-top:10px">aaa</p>
</div>


    
    

    
  
I very much suspect this bug is INVALID. Opera7.54 is doing the same as Mozilla
here.
See:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
"The top margin of an in-flow block-level element is adjoining to its first
in-flow block-level child's top margin if the element has no top border, no top
padding, and the child has no clearance."

I guess that is the part of the spec that describes what should happen here.

    
    

    
  
"and the child has no clearance"

If we apply clear:both to the h1 element,
the margins are collapsed too.

Actually, it doesn't matter if firefox merge the margin or not.
But it matters because that it applies margin to Header tags by default,
and when they're nested in DIVs, this problem occurs and confuse
me a lot.

    
    

    
  
With Testcase2, Opera7.54 does also the same as Mozilla. Maybe I'm quoting the
wrong part of the css spec here (or testcase2 shows a bug in Opera and Mozilla).
I must say, I also find these kind of things confusing.
Anyhow, this bug belongs in Layout:block and inline
Component: General → Layout: Block and Inline
Keywords: testcase
Product: Firefox → Core
Version: 1.0 Branch → Trunk

    
  
Assignee: firefox → nobody
QA Contact: firefox.general → core.layout.block-and-inline

    
    

    
  
(In reply to comment #4)
> "and the child has no clearance"
> 
> If we apply clear:both to the h1 element,
> the margins are collapsed too.
> 

'clear:both' only introduces clearance when there is a float nearby that
causes the element to be pushed down (space is introduced above the
top margin - clearance).
http://www.w3.org/TR/CSS21/visuren.html#clearance

-> INVALID
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID

    
    

    
  
Maybe I've been misunderstood about the clearance Def.
But there is still a problem.

I've put another block element in front of the other.
And the first child div's float = right.

The second div's clear = both, but its margin is still given to
its parent.

See the following:
<html>
<head>
<title>test</title>
<style>
body {
	margin:0px;
	padding:0px
}

#header {
	width:100%;
	height:100px;
	margin:0px;
	background-color:#2244ff;
}

#header div#first {
	float:right;
	margin:0px;
	color:#ffffff;
	background-color:#2244cc;
}

#header h1 {
	margin-top:20px;
	background-color:#2244aa;
	clear:both;
}
</style>
</head>
<body>
<div id="header">
  <div id="first">I'm the first Child, and My margin is 0. My float = right</div>
  <h1>I'm the H1 Child, the second Child. And I've got the clear:both. But my
margin is still assigned to my parent.</h1>
</div>
</body>
</html>
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---

    
    

    
  
(In reply to comment #8)
> The second div's clear = both, but its margin is still given to
> its parent.

The H1 top margin is in the lighter blue color, so it's not assigned to its
parent. If that were the case it would have the background color of body,
white, (try removing the floating DIV from the markup and you'll see what
it looks like without clearance).

You are using a recent trunk build to test I assume?


    
    

    
  
(In reply to comment #10)
> 
> The H1 top margin is in the lighter blue color, so it's not assigned to its
> parent. If that were the case it would have the background color of body,
> white, (try removing the floating DIV from the markup and you'll see what
> it looks like without clearance).
> 
> You are using a recent trunk build to test I assume?
> 

Well, I mean the margin should  be applied to <H1> now if it has clearance ,
according to W3C CSS 2 spec., but in fact, the margin is still applied to its
parent DIV.



    
    

    
  
I don't quite get what you want the testcase to look like, are you saying you
want to margin between the float and the H1 text (that is, a light blue colored
gap between the float and black text) ?

    
    

    
  
The rendering of attachment 169005 [details] is correct.

First, per 8.3.1 and 9.5.2 of CSS 2.1, the margin of the <h1> is hypothetically
collapsed with the margin of the #header. This moves the float into the <h1>,
and thus the <h1> doesn't clear the float. Since it has clear:both, it instead
is assigned clearance. The margins of all elements before the <h1> are collapsed
together, then the top border edge of the <h1> is placed flush with the bottom
of the float. The clearance is then set to the distance from the top of the
#header's content edge to the top of the <h1>, minus the margin on the <h1>.
This is roughly -4px. Thus the final construction diagram is a bit like this:

                                    /|\          | 
                                     |        +  | -4px clearance due
   +-<div id="header">------------   | 20px     \|/     to 'clear'
   |            +-----------------   | margin
   |            | FLOAT              | of <h1>
   |            +-----------------   |
   | +----------------------------  ---
   | | <h1>
   | |

...which is what current Firefox trunk builds do.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago → 20 years ago
Resolution: --- → INVALID

    
    

    
  
(In reply to comment #13)
I have to say I find the negative clearance a bit odd though...
If one views the margin-top:20px and clear:both as constraints on the layout,
they can both be met. But with negative clearance, the distance between the H1
and anything above is roughly 16px (not satisfying the author's constraint).
(Also, margin-top:1000px renders exactly the same).

Is there a reason it was designed like that?

Status: RESOLVED → VERIFIED

    
    

    
  
> I have to say I find the negative clearance a bit odd though...
> If one views the margin-top:20px and clear:both as constraints on the layout,
> they can both be met.

Not without clearance -- you need something to stop the margins collapsing with
the margins of the earlier element (since if they do collapse, then the float is
brought down, and however much margin you give, it doesn't clear the float.)


> Is there a reason it was designed like that?

I'm sure there is. I can't remember what it is, though. We spent many hours
including an entire afternoon session on those sections. The sheer number of
factors involved is mind boggling.

    
    

    
  
(In reply to comment #15)
> Not without clearance -- you need something to stop the margins collapsing

Oh, I agree with that.  What I was thinking was more like,
roughly:  MAX(margin-top, distance needed to clear the float),
which would satisfy both constraints.

    
    

    
  
(In reply to comment #13)

Testcase 3 renders as follow in my Firefox 1.0, I've 
carefully caculated the distances:
-------------------------------------------------------
                                             /|\       
                                              |        
                                              | 20px
                                              | margin
                                              | of
                                              | <h1>
   +-<div id="header">---------------------- --- ------
   |            +---------------------------
   |            | FLOAT RIGHT (bg:#2244cc)
   |            +--------------------------- --
   |                                            < 2 px here
   | +-------------------------------------- -- 
   | | <h1>
   | |

I'm not sure, is the result correct? 

    
    

    
  
No, that is not the correct result - Firefox 1.0 have bugs in this area.
However, those bugs have now been fixed in recent builds.

You need to use recent nightly builds when you are testing:
http://ftp.mozilla.org/pub/mozilla.org/mozilla/nightly/latest-trunk/
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

    
    

    
  
(In reply to comment #18)
> No, that is not the correct result - Firefox 1.0 have bugs in this area.
> However, those bugs have now been fixed in recent builds.
 

I See. Thank you.



    
    

    
  
Oops, the latest version crashed on my system.

I view the file using safe mode, it's OK now.

But because it crashed in normal mode, I can't use it. -_-

    
    

    
  
> Oh, I agree with that.  What I was thinking was more like,
> roughly:  MAX(margin-top, distance needed to clear the float),
> which would satisfy both constraints.

Yeah, we probably could have said that margin-top becomes 0 and the clearance
becomes the max of the original margin-top and the distance needed to clear the
float... But then what happens when the element has to collapse its margins with
its children or following siblings? The issue is complex, and I have no
intention of trying to get it changed. ;-)

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: