Полное описание примера бокса-списка, показывающего поля, заполнение и рамки

Эта диаграмма показывает боксы, сгенерированные списками UL, с двумя элементами LI списка.

У иллюстрации две части.

Первая показывает реальный вид боксов, сгенерированных элементами списка. Цвета фона и стили обрамления различаются для показа границ областей боксов.

Вторая часть показывает тот же вид, но содержимое, заполнение, рамки и края полей каждого бокса показаны явно. Хорошо видно, что вертикальные поля между боксами LI сжаты.