Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Adam Akers
7,357 PointsHaving a margin collapse of elements where only one of the elements has a margin?
I have been working to somewhat "clone" the look of the W3Schools site (not sure why I picked that site, just saw it and ran with it).
I ran into a strange issue where I was having a margin collapse of a div that didn't have a margin. Inside of the div there is an h4 header that has a margin, which is causing the collapse.
It was my understanding that for margins to collapse, there must be two margin areas that overlap, and then the larger of the margins will take over. Can anyone tell my why I am having this collapse with only one margin? I understand the fix for the collapse. I could either add a top border, or a padding of 1px, just wanted to understand this behavior.
The code in question is linked below in a codepen. the HTML I am referring to starts at line 33, and the css starts at line 81.
peyton caseria
Courses Plus Student 12,281 Pointspeyton caseria
Courses Plus Student 12,281 PointsI'm on mobile and codepen doesn't want to work. I will check this out more tomorrow. Also thanks for keeping the question organized and not confusing. This helps moderators a lot. Great Job!