How does adding a border or padding to a parent container prevent a collapsed margin with the first child element? Is it just a simple matter of the border acting as a separator between the parent and child that allows margin on both?
The padding or border creates a space of separation between vertical margins that would otherwise touch. Vertical margins that touch usually collapse (so stated because there are three exceptions); whereas those that are separated do not collapse. Horizontal margins never collapse.
See if reading this helps
https://www.w3.org/TR/CSS22/box.html#collapsing-margins
This should take you directly to section 8.3.1: Collapsing Margins.
2 Likes
As Ron said vertical margins that collapse must touch without any padding, borders or content being sandwiched between the two margins. This is true for adjacent elements and nested elements also (barring the exceptions mentioned in the article below).
This article is based on my original and updated by Adam but I think still stands the test of time and explains the details quite clearly.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.