Then, a general perception would be that the browser adds them up and puts 30 pixels of white space between the paragraph and the list. But this doesn’t happen. The browser applies the larger (20px here) of the two. And you see only 20px wide white space.

Workaround: Use padding on one tag along with margin on another.

Note: left, right margins, margins between flating elements and margins between absolutely/relatively positioned elements, don’t behave this way (colliding).