Problema con margen y padding CSS fuera de caja

daenor · #1 (**permalink**) 18/09/2012, 13:45

Muy buenas a todos!
Estuve buscando en el foro, pero no se como se define esto, por lo que decidi armar un nuevo post.

Seguramente a muchos les ha pasado, pero en mi caso, no se como resolverlo.
Es simple.
Teniendo un div con un ancho determinado, y quieriendo poner otro div dentro y aplicarle padding y margin a este ultimo, me lo deja fuera de la caja del div padre.

Me pasa siempre que cuando aplico esas dos propiedades, en vez de aplicarse como supongo que deberia* me agranda el ancho del div interior. Por lo que tengo que reducir el ancho del div interno para que no se valla fuera de caja y no me desarme la estructura.

Que deberia hacer? Que atributo estoy utilizando mal o no estoy utilizando?

Gracias por sus respuestas! :)
Slds!

* Margin: suma espacio hacia fuera del div
* Padding: suma espacio empujando al contenido hacia dentro (reduciendo el margen interno del contenido.

pzin · #2 (**permalink**) 18/09/2012, 13:51

No estás utilizando mal nada. Es un problema conceptual más bien. Lo que viene siendo el modelo de caja .

Se puede truncar, usando esta propiedad:

Código CSS:

Ver originalbox-sizing: border-box;

Como es una propiedad de CSS3, recomiendan usar también -webkit y -moz. Además en IE sólo funciona desde la versión ocho en adelante.

Yo te recomendaría mejor mirar lo del modelo de caja. Aunque box-sizing sea coser y cantar, es mejor saber el porqué de las cosas.

flashmax · #3 (**permalink**) 18/09/2012, 13:52

Sin código fuente no hay solución!!!!!!!!!!!!!!!!!!!!!!!!!!! muestra algo

daenor · #4 (**permalink**) 19/09/2012, 10:31

Bonez!!
Excelente el link. La siguiente linea lo expresa:
"El ancho de la caja está dado por la suma de los márgenes, bordes y rellenos izquierdos y derechos, y el ancho del contenido. La altura está dada por la suma de los márgenes, bordes y rellenos superiores e inferiores, y la altura del contenido."
Hay alguna manera de manipularlo mediante CSS2?
Porque al parecer, lo mas adecuado entonces es hacer un ancho no del 100% (sino mas chico) para que entre correctamenet en su contenedor, no es asi?

flashmax
Mas que codigo, es una cuestion de concepto mio. Te pego aqui un ejemplo de lo que digo:

Y espera que escribo el codigo...

Código HTML:

Ver original<div style="width:300px; background-color:#9C3; padding:10px;">
    <div style="margin:10px; padding:10px; width:100%; background-color:#FF9;">
        CAJA INTERNA QUE SE SALE DEL CUADRO
    </div>
</div>

Como resolverias este tema?
Saludos!

noruas · #5 (**permalink**) 19/09/2012, 12:41

Pues... width:auto ...

Código HTML:

Ver original<html>
<head>
</head>
<body>
    <div style="width:300px; background-color:#9C3; padding:10px;">
        <div style="margin:10px; padding:10px; width:auto; background-color:#FF9;">
            CAJA INTERNA QUE SE SALE DEL CUADRO
        </div>
    </div>
</body>
</html>

rodeirojg · #6 (**permalink**) 19/09/2012, 16:50

Es probable que no hayas observado que tanto el Padding como el Margin, son valores que SE SUMAN al ancho y alto que le hayas atribuído al div. Si ambos divs tienen el mismo tamaño, el que está dentro se va a sobrepasar de los límites.

pzin · #7 (**permalink**) 19/09/2012, 17:02

rodeirojg, es seguro que no hayas observado el mensaje #4 donde indica que lo observó.