Question

Enlighten me a question:

If I put a div inside another, in this second div I can’t use the properties margin-left and margin-top without changing the position of parent div?

I need to use padding instead??

EXEMPLE:

FIDDLE WITH MARGINS: http://jsfiddle.net/zyEYj/1/

FIDDLE WITHOUT MARGINS: http://jsfiddle.net/zyEYj/2/

FIDDLE WITH PADDING INSIDE MOTHER DIV: http://jsfiddle.net/zyEYj/3/ (this is the final effect i want, but i need to use padding, and change the height of #header)

codes:

<div id="header" class="container">
    <div class="logo">
        <a href="index.asp"><img src="imagens/logo.png" /></a>
    </div>
</div>​

css:

body{
background:#d3f1fc;        
}

#header{
    height:135px;
    background:#ee4b14;
    padding-top:35px;
    padding-left:21px;
}

.container {
    margin:0 auto;
    width:960px;
}

.logo{
    width:382px;
    height:114px;
    background:#FFCC00;
}​

Answer 1

This behavior is referred to as margin collapse. Two adjacent margins will collapse into one another, with the higher absolute value taking precedence.

This can be defeated either by separating the margins (via padding or border on the parent element), or by using position: relative on the child element, and adjusting its position that way.

HTML:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

Normal

/*
    these margins will collapse, and result in a total margin of 15px
*/
.parent
{
    margin: 5px;
}

.child
{
    margin: 15px;
}

Padding/Border solution

/*
    these margins will be separate, resulting in a total margin of 20px
    plus the border or padding of 1px
*/
.parent
{
    margin: 5px;
    padding: 1px; /* or border: 1px; */
}

.child
{
    margin: 15px;
}

Position: relative solution

/*
    there is only one margin here, and the child
    is positioned relative to where it would usually be rendered
*/
.parent
{
    margin: 5px;
}

.child
{
    position: relative;
    top: 15px;
}