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.