Como Caja: el modelo

14/dic/2006 16

Un problemón de quien pretende entender esto del diseño con hojas de estilos, llega al momento de construir el layout y que todos los elementos se queden donde deberían estar, posicionándolos, flotándolos, como mejor se prefiera. Margin, padding, border y width dentro de un div suelen causar grandes conflictos, los que se explican en el Modelo de Caja de CSS, al cual describe las cajas rectangulares que son generadas por los elementos de la estructura del documento. Comencemos con esto.

Dimensiones de la caja:

Cada caja tiene un área de contenido (texto, imagen, ambos, ninguno) y las áreas que la circundan, como padding, margin y border; el tamaño de cada propiedad puede ser especificado al momento de construir y darle estilo a esos elementos. En el siguiente dibujo se muestran esas áreas y cómo se comportan.

Cuando tenemos un div de ancho fijo, digamos como en el ejemplo de 300px, al agregarle un padding de 10px a ese mismo div, ese padding hace que el div gane 10px más en su ancho (claro que en el alto también, pero en este momento estamos centrándonos en el ancho exclusivamente); nuestro div ahora mide 320px (ganamos 10px por lado). Con el margin ocurre lo mismo, al agregarle 20px de margin, ganamos 40px en nuestro div (20px por lado), el que mide ahora 360px. Si además, nuestro div tiene un border de 1px, ese borde también se suma al ancho de nuestro ya deformado div, midiendo finalmente 362px. Finalmente, podemos afirmar que el ancho (y alto) de la caja está determinado por la suma de márgenes, bordes y rellenos (padding).

¿Y qué hacer?

No es nada del otro mundo, Existen varias fórmulas para enfrentar este pequeño detalle (que no es defecto) de las dimensiones del div. Primero que nada, y como regla, es utilizar el reseteador universal en tu hoja de estilos, antes que nada:

* {
     margin: 0;
    padding: 0;
}

Así, los márgenes y rellenos (así como todos los elementos HTML) tienen por defecto margin y padding 0, anulando la diferencia de esta propiedad entre browsers (IE dista mucho de Firefox, y de Safari, y de Opera), logrando una igualdad.

Otra, es nunca darle ancho fijo a los div’s, sólo a sus contenedores externos. En el caso de darle un ancho fijo al div, se recomienda no darle padding al div, sino a los elementos que están contenidos dentro de él, por ejemplo, a un <p> o a un <img>. Así, evitamos que nuestro div se deforme sin que lo podamos controlar. Son pequeñas mañas, de las que te acostumbras y que hacen que nuestro diseño se vea igual entre browsers y plataformas.

Ver ejemplo en HTML

Comentarios

  1. Cosas sencillas [#]

    […] En CSS-Lab, comentan sobre el problemón de quien pretende entender esto del diseño con hojas de estilos, llega al momento de construir el layout y que todos los elementos se queden donde deberían estar, posicionándolos, flotándolos, como mejor se prefiera. Margin, padding, border y width dentro de un div suelen causar grandes conflictos, los que se explican en el Modelo de Caja de CSS, al cual describe las cajas rectangulares que son generadas por los elementos de la estructura del documento. Comencemos con esto: […]

  2. fearlex [#]

    “Otra, es nunca darle ancho fijo a los div’s, sólo a sus contenedores externos.”

    Esta parte no la entendi, que quisistes decir ???

    Muy buen post, aclara muchas dudas. Gracias 😛

  3. Micho [#]

    Excelente tema…..

    para el de abajo, significa que el contenedor externo es el k hay k darle el ancho fijo, es decir, en ultima instancia, solo deberia ser BODY ken tenga ancho fijo, los demas en porcentaje…..

    creo k eso quizo decir…..

    o no?

  4. CSSLab Admin [#]

    muy bien interpretado Micho, ese es un metodo para paliar este tema. darle ancho fijo (por ej. 760px) a un container, o al body por ultimo, y a los div’s interiores darles porcentajes.

  5. Susana [#]

    para evitar el diferente posicionamiento de los layouts en ie y firefox, utilizaba un truco en el css: *html. Con esto posicionaba los paddings de ie.
    El problema es que ahora ie7 posiciona como firefox y al leer el truco, queda todo descolocado. ¿Cómo hacer para que el truco sólo afecte a las versiones de ie6 e inferiores?

  6. CSSLab Admin [#]

    Susana, la mayoria de los hacks q se utilizaban hasta IE6 solo empeoraran la visualizacion de sitios con IE7. te recomiendo q utilices comentarios condicionales para tus arreglos pre-IE7.
    Saludos.

  7. nezara [#]

    Excelente todos los post. Una vez mas felicito a CssLab por tan buena guía respecto de las cajas. Me gustaría dejar planteada una consulta. He visto en algunos sitios como en las fotos que vienen con drop shadow (efecto sombra) añaden marcos y bordes con esquinas particulares. Actualemnte estoy diseñando un sitio en el cual quiero ponerle un efecto como que si las fotos estuvieran pegadas con scotch o cintas adhesivas. Es posible? Gracias de antemano.

  8. CSSLab Admin [#]

    nezara, gracias por los elogios. lo q pretendes hacer con tus fotos, es muy factible, depende de mas q nada tu ingenio, creatividd y algo de habilidad con los codigos. publica tu inquietud en los foros, aver si pueden ayudarte con algo de CSS.

    Salu2

  9. DinhoTF [#]

    que te puedo decir! muchas gracias… ya me estaba reventando la cabeza para que IE 7 no haga lo que quiera con las divs! gracias!

    Saludos para todo jijiji. y viva Firefox! (y no me gusta linux)

  10. CSSLab » Como Caja 2: superando el modelo [#]

    […] En el artículo donde explico de qué se trata y cómo nos afecta el modelo de caja al construir un layout con CSS, se pueden sacar algunas conclusiones, las que en realidad dejo bien claro: utilizar el reseteador universal, tratar de no definir anchos a los div’s y el más importante, no darle padding al div u otro elemento contenedor (para no deformarlo). Con esas 3 simples reglas podemos superar bastante este inconveniente, pero me interesa entregar una recomendación para que se pueda sintetizar un poco nuestro layout y al mismo tiempo ahorrar un poco de código, logrando además más control sobre nuestra diagramación. […]

  11. » 100% alto, finalmente para todos | CSSLab [#]

    […] pueden leer en el muy muy útil artículo sobre el modelo de caja (si no lo han leído, háganlo ya que es muy muy útil), el padding sí […]

  12. » Borde interno con CSS | CSSLab [#]

    […] todos es conocido el modelo de caja y cómo la propiedad border juega un papel importante en ello. Para los que no, un […]

  13. » Borde interno con CSS | CSSLab [#]

    […] todos es conocido el modelo de caja y cómo la propiedad border juega un papel importante en ello. Para los que no, un […]

  14. » Pronto… | CSSLab [#]

    […] Como Caja: el modelo […]

  15. CSSLab - jQuery browserSizr [#]

    […] layout this should not happen, because you have more control over the structure itself and the box model behaves as you expect if you use a good CSS […]

  16. Outlinr: a bookmarklet ↩ CSSLab [#]

    […] elements are involving, etc. I use outline because it’s a property that does not modify the box model and won’t going to break more elements that are already working fine. If I use border […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab