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:
* {<br />
margin: 0;<br />
padding: 0;<br />
}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 o a un . 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.