This diagram illustrates the boxes generated by a UL
list with two LI list items.

There are two parts to the illustration. The first shows the actual
rendering of the boxes generated by the list elements. Background
colors and border styles vary to delimit the box areas.

The second shows the same rendering, but the content, padding,
border, and margin edges of each box are shown explicitly. In
particular, the illustration shows how vertical margins between
the LI boxes collapse.