1

I had always assumed that a bottom and top margin would be the same as a thicker say bottom margin in spacing elements but it's not:

<h4>Margin: 1px 0 1px 0</h4>
  <div style="background-color: gray;margin: 1px 0 1px 0;height: 50px;"></div>
  <div style="background-color: gray;margin: 1px 0 1px 0;height: 50px;"></div>
<br>
<h4>Margin: 2px 0 0 0</h4>
  <div style="background-color: gray;margin: 2px 0 0 0;height: 50px;"></div>
  <div style="background-color: gray;margin: 2px 0 0 0;height: 50px;"></div>

enter image description here

Why is this? Safari FF and chrome all the same.

http://jsfiddle.net/vzp0kL9d/

cyberwombat
  • 38,105
  • 35
  • 175
  • 251
  • possible duplicate of [For what reason margin collapse rules were introduced in CSS?](http://stackoverflow.com/questions/1438114/for-what-reason-margin-collapse-rules-were-introduced-in-css) – icktoofay Jul 26 '15 at 20:41
  • While technically a duplicate of the question linked in the previous comment, this question is nicely focused, visual, and much easier to understand for someone being exposed to the margin collapsing concept for the first time. Keeping this question open should provide clarity to some users who might otherwise post other conceptual duplicates. – DreadPirateShawn Jul 27 '15 at 01:06

1 Answers1

3

It's because of margin collapsing.

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

It can sometimes be a quick fix to use padding instead of margin.

nomve
  • 736
  • 4
  • 14