El modelo de caja se compone de las siguientes propiedades:
- width: la anchura del elemento.
- padding: el relleno del elemento.
- border: el borde del elemento.
- margin: el margen del elemento.
Y viene a ser algo así:
O así (imagen de Wikipedia):
Un ejemplo
Supongamos que tenemos un elemento DIV que deba tener una anchura total de 600 píxeles, un margen respecto a otros elementos de 10 píxeles por sus cuatro lados, un borde de 3 píxeles y un relleno de 20 píxeles.
Al especificar la propiedad width habrá que dar 600px para Internet Explorer 5.5, pero para el resto de navegadores habrá que restar el los rellenos (padding) y los bordes (border): hay que restar a los 600px de ancho los 3px de borde izquierdo, los 20 px de relleno izquierdo, los 20px de relleno derecho y los 3px de borde derecho. Quedarían 554px.
Y la duda que probablemente surja es: ¿como especifico en una misma regla CSS la anchura para IE 5.5 y la anchura para el resto de navegadores? Muy sencillo. Así quedaría la regla CSS:
div {
width:600px;
width:554px;
padding:20px;
border:3px solid #000000;
margin:10px;
}Como se puede observar hay dos anchuras definidas: primero la de IE 5.5, y después la del resto de navegadores con una barra invertida que IE 5.5 no es capaz de leer, pero que si pueden leer el resto, y que deja inutilizada la anchura de IE 5.5.
Para la altura sirve el mismo procedimiento, solo que la barra invertida se posiciona tras el segundo caracter de la propiedad: height.
Esto también se da en el modo chapuzas de IE6 y de IE7.
Actualizado 2007-09-17.
Relacionados
Enlaces externos: