ansaurus

Question

Margin on child element moves parent element

Answer 1

+3 A:

This is normal behaviour (among browser implementations at least). Margin does not affect the child's position in relation to its parent, unless the parent has padding, in which case most browsers will then add the child's margin to the parent's padding.

To get the behaviour you want, you need:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

Ben James 2009-11-19 11:10:31

Adding border to the parent will effect the child's margin too, try `.parent {border: solid 1px;}`

o.k.w 2009-11-19 11:17:30

Thanks man. I found it in the spec: http://www.w3.org/TR/CSS2/box.html

Robert Koritnik 2009-11-19 12:50:11

Answer 2

A:

The margin of the elements contained within .child are collapsing.

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p> 
    </div>

</div>
</body>
</html>

In this example, p is receiving a margin from the browser default styles. Browser default font-size is typically 16px. By having a margin-top of more than 16px on #child you start to notice it's position move.

25thhour 2009-11-19 11:45:40

Answer 3

+1 A:

Found an alternative at http://stackoverflow.com/questions/1878997/child-elements-with-margins-within-divs You can also add:

.parent { overflow: auto; }

This prevents the margins to collapse. Border and padding do the same.

vdboor 2009-12-21 13:00:03

ansaurus

tags:

views:

answers:

Margin on child element moves parent element

related questions