Como Caja: el modelo
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 elements 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.
“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
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?
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.
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?
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.
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.
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
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)