Tested the DIV margin collapse at the end
I've tested the DIV margin collapse at the end of this lesson. I couldn't face with this issue, because for me the element with higher margin and the other remained the same 30px and 20px margin. I've inserted an other div under, but next to the wrapper div we just wrote with Guil. My code look like this:
<div class="wrapper"> <header class="main-header"> <h1 class="name"><a href="#">Best City Guide</a></h1> <ul class="main-nav"> <li><a href="#">ice cream</a></li> <li><a href="#">donuts</a></li> <li><a href="#">tea</a></li> <li><a href="#">coffee</a></li> </ul> </header> <h2>Welcome!</h2> <p>Everything in this city is worth waiting in line for.</p> <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p> <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p> <h2>Great food</h2> <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee dragée chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p> <footer class="main-footer"> <span>©2015 Residents of The Best City Ever.</span> </footer> </div> <!-- end of the wrapper--> <div id= 'test'></div>
Could you tell my why my DIV didn't collapse ?? Regarding the video it should be one margin bottom with 30px for the wrapper and nothing top margin for the test div. Right?
Jennifer NordellTreehouse Teacher
Hi there, Peter Retvari ! This is a great question, and the answer is actually in the Teacher's Notes (although not immediately obvious). Take a look:
If there is no content, padding, or border area to interrupt two touching margins, the margins collapse to the largest of the two margin values.
<div> with the id of "test" contains no content, and the rule contains no borders. It does, however, contain a padding of 10px, which is what is causing the "interruption" here and the collapse is not happening. Removing the padding rule causes this div to collapse.
Hope this helps!