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

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

Peter Retvari
seal-mask
.a{fill-rule:evenodd;}techdegree
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 Points
Posted by Peter Retvari
.a{fill-rule:evenodd;}techdegree
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 Points
Peter Retvari
.a{fill-rule:evenodd;}techdegree
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 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
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse 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.

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 11,075 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,075 Points

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

Peter Retvari
seal-mask
.a{fill-rule:evenodd;}techdegree
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 Points
Peter Retvari
.a{fill-rule:evenodd;}techdegree
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

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: