CSS CSS Layout Basics Getting Started with CSS Layout Why Vertical Margins Collapse

Peter Retvari
Peter Retvari
Full Stack JavaScript Techdegree Student 8,391 Points

Tested the DIV margin collapse at the end

Hi folks,

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&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>

    <footer class="main-footer">
        <span>&copy;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?

Peter Retvari
Peter Retvari
Full Stack JavaScript Techdegree Student 8,391 Points

Dane Parchment here you can see my CSS:

.wrapper {
  width: 70%; /* a szelesseg 50% foglalja le*/
  margin: 0 auto;
  margin-bottom:30px;
}

.main-header {
    background: #3acec2;
  padding: 1em 0;

}

.main-footer {
    padding: 2em 0;
    background: #d9e4ea;
}

#test {
padding:10px;
background: tomato;
margin-top:20px;
}

1 Answer

Jennifer Nordell
MOD
Jennifer Nordell
Treehouse Moderator

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.

So your <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! :sparkles:

Dane Parchment
Dane Parchment
Treehouse Moderator 9,610 Points

This, is true! Jennifer here beat me to it, with a much better response!

Peter Retvari
Peter Retvari
Full Stack JavaScript Techdegree Student 8,391 Points

Thanks Jennifer ? So it is only valid (I mean the collapse) for empty divs ?? Who uses empty divs for building up a website or webapplication? I mean could this margin collapse happen in 'real world' scenario as well?

Jennifer Nordell
Jennifer Nordell
Treehouse Moderator

Peter Retvari your assumption here is that you've coded the empty div into the HTML and that might not be the case, starting out. This could be a div that you are changing with JavaScript. Maybe you want to get input from the user about a to-do list, their favorite movie, their cats' names, whatever and then fill in that div dynamically with whatever they input. It might look a bit nicer to just not have that div take up space until all that information is input :smiley: