Este diagrama ilustra las cajas generadas por una lista UL con ítems de lista LI.
Hay dos partes en la ilustración. La primera muestra el procesamiento real de las cajas generadas por los elementos de la lista. Los colores del fondo y los estilos de los bordes varían para delimitar las áreas de las cajas.
La segunda muestra el mismo procesamiento, pero los límites del contenido, del relleno, de los bordes y de los márgenes de cada caja son mostrados explícitamente. En particular, la ilustración muestra cómo los márgenes verticales entre las cajas de los LI se cierran.