márgenes cerrados | collapsing margins

by cristian_cena

HTML

<div id="principal">
    <div id="recuadro">
        <strong>
            La solución consiste en:
        </strong>
        <p>
            - aplicar overflow:hidden; a la capa padre. 
            <br />
            - aplicar position:relative a la capa padre 
              y position:absolute a la capa hija        
        </p>
    </div>
</div>

<!--

MARGENES CERRADOS O "COLLAPSING MARGINS"
[ENG] http://reference.sitepoint.com/css/collapsingmargins
[ESP] http://www.wmasterfacil.com/0036modelocajas.html

-->

CSS

*{margin:0; padding:0; border:0;}
strong{font-weight:bold;}
#principal
{
    width:600px;
    height:300px;
    background:yellow;
    /* position:relative; left:0; top:0; */ 
    /*overflow:hidden;*/
}
#recuadro
{
    margin:20px;
    width:300px;
    height:200px;
    background:orange;
    /*position:absolute*/
}