CSS: Modelo de caja

El modelo de caja: la propiedad margin, border y padding

Cualquier elemento de una página web está contenido en una "caja" rectangular. Esta caja puede tener:

La imagen siguiente muestra un párrafo de texto con borde y márgenes exterior e interior. En la imagen, los límites del borde y de los márgenes se han indicado mediante líneas discontínuas, pero en realidad esos límites no se ven en los navegadores.

Modelo de caja CSS Modelo de caja CSS En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. elemento padding (margen interior) border (borde) margin (margen exterior)

Tanto el margen exterior (margin) como el margen interior (padding) son transparentes. Por eso el margen interior se ve del color de fondo del elemento (en el ejemplo, del color de fondo del párrafo), mientras que el margen exterior se ve del color de fondo del elemento padre (en el ejemplo, del color de fondo de la página).

Cambio del modelo de caja: box-sizing

En el modelo de caja CSS "clásico", el borde y los márgenes interior y exterior se añaden al tamaño del elemento definido con las propiedades width y height.

Modelo de caja CSS "clásico" Modelo de caja CSS "clásico" (box-sizing: border-box) width (ancho) height (alto) elemento padding (margen interior) border (borde) margin (margen exterior)

La propiedad box-sizing, introducida en la recomendación CSS Basic User Interface Module Level 3 (CSS3 UI) (aprobada en junio de 2018), permite modificar este comportamiento y hacer que el borde y los márgenes interior y exterior se puedan incluir en el interior del tamaño definido con las propiedades width y height. En este caso, lógicamente, se reducirá el espacio disponbile para el contenido.

Modelo de caja CSS "clásico" Modelo de caja CSS "alternativo" (box-sizing: content-box) width (ancho) height (alto) espacio restante para el contenido padding (margen interior) border (borde) margin (margen exterior) elemento


Los ejemplos siguientes muestran como la propiedad box-sizing modifica la presentación de dos elementos del mismo tamaño:

p {
  width: 200px;
  height: 100px;
  box-sizing: border-box;
  border: red 25px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  width: 200px;
  height: 100px;
  box-sizing: content-box;
  border: red 25px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  width: 200px;
  height: 100px;
  border: red 25px solid;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo

Tipo de caja: la propiedad display

La propiedad display permite especificar el tipo de caja que se aplica en un elemento. Los diferentes tipos de cajas corresponden a diferentes tipos de contenido (texto, listas, tablas)

Los posibles valores de display son los siguientes: