CSS margin style property not working

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).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>