There’s a weird characteristic of margin style property. Instead of adding two margins together, a web browser applies the larger of the two margins. This is called colliding margins.
For example, if there an unordered list tag above a paragraph tag. The list tag is assigned with the bottom margin of 20 pixels and the paragraph is assigned a value of top margin as 20 pixels.
<ul style="margin-bottom: 20px;"><li><li></ul> <p style="margin-bottom: 10px;"></p>
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).
Related posts:
