Modelo de caja

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

• un borde visible (que se define mediante la propiedad border)
• un margen exterior transparente por fuera del borde (que se define mediante la propiedad margin)
• un margen interior transparente entre el borde y el elemento (que se define mediante la propiedad padding)

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.

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