rubensa, algo en qué pensar

Sábado, 21 de enero de 2006

Box Model

[ACTUALIZACION]: Esta anotación ha sido mudada a aquí.

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

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).

Más información sobre el Box Model aquí o aquí.

Por: Rubén Suárez Alvarez | HTML/CSS | Comentarios (0) | Referencias (0)

Comentarios

Comentar

Referencia

URL para referencias o trackbacks

Acerca de

"El trabajo tiene un peso específico dentro de la empresa. A más trabajo, más peso y por tanto más abajo estás. A menor trabajo más ligero te vuelves y más asciendes. ¿Y tú, trabajas o asciendes en tu empresa?"

rubensa