Este diagrama ilustra las cuatro áreas de la caja genérica de CSS: contenido, padding, border y margin.
Hay cuatro cajas anidadas: el área del contenido es la de más adentro, luego las áreas de padding, border y margin. Cada área tiene un estilo de borde diferente para distinguir sus límites: el límite del contenido es fino y lleno; el de padding es fino y cortado; el de border es grueso y lleno; el de margin es grueso y cortado.
Abajo de las cajas, una leyenda especifica los estilos de bordes usados para los cuatro límites.