181377 - Element margin applied to parent element.

Status: VERIFIED INVALID

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

Description

[Aleksey Lazar]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.2b) Gecko/20021016
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.2b) Gecko/20021016

The margin set for P element (Freshman Students) inside a DIV tag using CSS2
class .menu-selected p {see stylesheet} seems to be applied to the parent
element, which I don't think should be. This happens even if the parent
element's margins are explicitly set to 0.

Reproducible: Always

Steps to Reproduce:
1. Create a CSS class .cssclass{ } with margins/padding set to 0.
2. Create a CSS descendant selector .cssclass p{ } with top margin set to 4px.
3. Set contrasting background colors for BODY and .cssclass elements (for easy
observation)
4. Apply the above class to a DIV tag in HTML (XHTML 1.0 Transitional)
5. Insert a P tag inside the <div class="cssclass"></div>
6. View in Mozilla.

Actual Results:  
The margin is applied to <div class="cssclass"></div>.

Expected Results:  
The margin should be applied to P element inside the DIV tag.

I used and external stylesheet.

Comment 1

[Aleksey Lazar]

After additional fiddling around with, it turns out that element does not drag
the containint element with it, but rather disables the display of the
containing block's background color/image. This goes away if the containing
block's border is set to be more than 0px.

Comment 2

[Boris Zbarsky [:bzbarsky]]

See http://www.w3.org/TR/CSS21/box.html#collapsing-margins for an explanation of
why Mozilla's behavior is indeed correct.

Comment 3

[Hixie (not reading bugmail)]

yup