Box Model

21/01/2006

Thinking inside the box
El box model de CSS describe las cajas rectangulares que se generan para los elementos en el arbol de documentos y que se estructura de acuerdo con el modelo de formato visual.

Lo más importante es conocer cómo se ordenan las distintas cajas, es decir, cuál está contenida en cuál.
Aquí muestro un gráfico en el que se aprecia perfectamente cual es el orden de las cajas:
Box Model básico de CSS

Así, el ancho efectivo total de un elemento será la suma de:
margin-left + border-width + padding-left + width + padding-right + border-width + margin-right

Por ejemplo, si tenemos el estilo:

div.boxtest {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
}

El ancho total será:
20+30+300+30+20 = 400

NOTA: Todo esto es así en las últimas versiones de los navegadores, pero en otras versiones anteriores, que no cumples la especificación del W3C pueden necesitar algún hack.

Otra cosa que hay que tener en cuenta a la hora de hacer los cálculos es el margin collapsing (aquí se puede obtener más información relacionada).

Algunos enlaces de interés

The Box Model Problem
CSS Positioning
CSS – Auto-height and margin-collapsing
Automatic CSS box-model adjustments added to YAHOO.ext.Element
Internet Explorer box model bug
El modelo de caja, primera parte
El modelo de cajas, segunda parte

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: