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 transparente exterior al borde (que se define mediante la propiedad margin)
• un relleno transparente entre el borde y el elemento (que se define mediante la propiedad padding)

La imagen contigua muestra un párrafo de texto con relleno, borde y margen. Los límites del borde y del margen están indicados con líneas discontínuas, aunque esos límites no se ven en los navegadores.

El relleno (padding) es transparente y se ve del color de fondo del elemento. El margen (margin) es transparente y se ve del color de fondo del elemento padre (en el ejemplo, del color del fondo de la página).