Why does 10px + 10px = 10px?

Question

I have the following script where the margin for the . portlet class is behaving strangely:

http://jsfiddle.net/mYx5y/19/

it should be adding 10px around each portlet, which should mean a gap of 20px between portlets. For some reason, I am only getting 20px if a portlet has a widget to the right or left of itself, but only 10px if the portlet has another portlet above or below it.

Why am I getting 10px vertically?

Answer 1

Because margins don't add up, they collapse. If you have two elements A and B, A margin=10px and B margin=15px, the spacing between A and B will be 15px.

Two solutions:

1. Use margin-bottom: 20px, margin-top: 0px
2. Wrap them into a container and apply padding: 10px 0;

Answer 2

Because margins collapse, they are not added, just max()-ed (the biggest margin value of neighbouring objects will be used). Use padding if the space is part of your element.