Skip to main content

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

7
  • 62
    +1 When styling typography and abritary sequences of paragraphs, headings and lists it's almost always better to space the elements with margins because of the adjacent margin collapsing behaviour. Commented Nov 8, 2013 at 11:01
  • 25
    Why is it that vertical margins collapse while horizontal ones don't? That could confuse a lot of people Commented Dec 17, 2014 at 21:58
  • 23
    The vertical margins only collapse for block elements. For inline block elements the margins are added both vertically and horizontally. So I am not sure that it is an issue that horizontal margins don't collapse on block elements since they fill their container anyways. Commented Feb 16, 2015 at 22:19
  • 7
    "Why is it that vertical margins collapse while horizontal ones don't?" there is no mechanism for having block elements side by side to each other without using floats - whose margins never collapse anyway (even vertical) or absolute positioning, where there's obviously no collapsing, or inline-block, which uses a different model where it's considered inline and content (spaces, text) is significant, or other things like tables, flexbox, columns where the gap between columns has special behaviour. So in short there is no place that horizontal margin collapsing could be used even if possible Commented Apr 13, 2015 at 1:48
  • 12
    Also you should take note that padding is included in total width/height the element, when used with box-sizing: border-box; so if you have width: 100px; padding-left: 20px; the total width will still be 100px but the area for content is reduce by 20px, unlike box-sizing: content-box; where padding is separate in calculating content width which makes your total width 120px in content-box; Commented Nov 9, 2015 at 6:19