CSS 2: 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 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).

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: