Problema margin div

[xlos_mas_pro]

Hola amigos me e estado dando vueltas y no e podido solucionar el problema.
lo que pasa es que tengo una caja general que contiene dos cajas display inline-block y que a su vez una de esas cajas contiene dos cajas block asi




y ademas una de estas cajas block la primera tiene otro div dentro llamado IMG_PER
al cual le puse un texto DIV IMG_PER para mostrar el error lo que sucede es que al darle un margin-top a ese div IMG_PER el div contenedor toma el margen y no el div img_per asi



pongo el codigo html y css del problema

Código HTML:

<section id="prin_box">
 
 
                <article id="info_prin">
 
                    <div id="sup">
 
                        <div id="img_per">
                            DIV IMG_PER
                        </div>
 
                    </div>
                    <ul id="gen">
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
 
                </article>
 
 
                <article id="img_pt">
 
                </article>
 
 
            </section>
 

Código CSS:

#prin_box
{
    display: block;
}
 #prin_box #info_prin
{
    width: 250px;
    border:1px solid red;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    height: 230px;
}
 #prin_box #info_prin #sup
{
    height: 80px;
    background: #8daec3;
    margin: 0;
    border-radius:10px 0 0 0;
    padding: 0;
    display: block;
}
#prin_box #info_prin #sup #img_per
{
    display: block;
    margin: 0 0 0 20px;
    width: 100px;
    border:1px solid green;
 
}
 #prin_box #info_prin #gen
{
    height: 150px;
    border:1px solid yellow;
    background: white;
    display: block;
    margin:0;
    padding: 0;
    border-radius:0 0 0 10px;
    list-style: none;
}
 #prin_box #img_pt
{
    height: 230px;
    width: 750px;
    margin: 0 0 0 -6px;
    display: inline-block;
    border:1px solid blue;
    vertical-align: top;
    background: #eee;
    border-radius:0 10px 10px 0;
}
 

se que es extenso pero porfavor necesito ayuda

[rauldev]

Prueba poniendo esto.

Código:

#prin_box #info_prin #sup #img_per
{
    display: block;
    margin: 20px 0 0 20px;
    width: 100px;
    border:1px solid green;
    float:left;
 
}

[pzin]

Es una cuestión de colapsamiento de CSS, una cosa más bien extraña.

Para solucionarlo hay más de una técnica, la que yo suelo hacer es añadirle al contenedor un overflow quedando en tu caso algo así:

Código CSS:

#sup {
  overflow: hidden;
}
 

Eso forzará a CSS a no colapsar los márgenes y aplicará el margen justo como quieres.

[hackjose]

Checa este articulo
https://developer.mozilla.org/en-US/...gin_collapsing