Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a CSS: El modelo de caja

Datos de búsqueda

CSS: El modelo de caja

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í:

Modelo de caja en CSS

O así (imagen de Wikipedia):

Modelo de caja

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:

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio