Al elemento ul se le ha aplicado un margen de 20 píxeles, igual que a cada li.

Como se puede ver —siempre que esté utilizando un navegador basado en estándares como Firefox 2 u Opera 9—, la primera impresión es que los márgenes superior del primer elemento de la lista y el margen inferior del último han desaparecido. Sin embargo, no es así: lo que ha ocurrido es que el margen superior del primer li ha colapsado con el margen superior de ul, e igual para el último elemento y el margen inferior. Así, la distancia que separa el párrafo inferior es de 20 píxeles.

Si ahora a los li les aplicamos un margen inferior de 40 píxeles...

...el párrafo se sitúa a 40 píxeles, que es el margen resultado de colapsar los 20 de ul con los 40 del li.