Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Mobile-First CSS Layout

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Why Vertical Margins Collapse

3:42 with Guil Hernandez

In this video, you'll learn why vertical margins collapse and how to prevent them from collapsing.

Resources

Video review

  • 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.
  • You may experience margins collapsing in adjacent elements like paragraphs and divs.
  • If a div's bottom margin is larger than the top margin of the div below it, the margin area between the divs collapses to the largest of the two margin values.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    In my layout, the body's margin value is set to zero, in the normalized CSS reset. 0:00
    So why is there a 21 pixel gap above the header? 0:06
    Shouldn't the header be at the top edge of the page? 0:11
    This is a common layout issue that happens with top and bottom margins. 0:15
    You will likely come across this issue a lot when building your layouts. 0:19
    In fact, many designers and 0:23
    developers run into this without realizing what it is or why it's happening. 0:24
    So, in this video, you'll learn why this happens and how to fix it. 0:29
    So the gap you're seeing above the header is actually the top margin 0:33
    of the H1 element. 0:37
    If I open the Chrome developer tools and inspect the H1 element, 0:39
    notice how the top margin extends beyond the header and 0:45
    collides with the top margin edge of the body. 0:49
    So, now you may be wondering, well the heading is inside the header container. 0:53
    Shouldn't we see the margin inside the header instead of outside? 0:58
    This is what's called a collapsing margin and it's a normal behavior in page layout. 1:02
    What's happening, is the H1's top margin is touching the top margin of the body. 1:07
    The space between the H1 and its containers collapsed 1:14
    because there's no border or padding area in the header or 1:18
    a content area above the H1 to separate its top margin from the body. 1:22
    Now if there's nothing to interrupt the two margins, 1:28
    then the margins collapse to the largest of the two margin values. 1:31
    In this case, it's the H1's default top margin. 1:35
    So there are a few different ways I can get rid of this gap. 1:39
    One way is setting the H1's top margin to zero. 1:42
    In my style.css file, I'll create a new rule 1:45
    that targets the H1 element, and sets its top margin value to zero. 1:51
    When I save my style sheet, and refresh the browser we can see that the gap is no 1:57
    longer there because now both the body and H1's margins collapsed to zero. 2:01
    Another method I can use to remove the gap above the header 2:09
    is give the main header any top padding value. 2:14
    Back in my style sheet I'll scroll down to the main header rule. 2:19
    Add a padding property and set the top and 2:24
    bottom padding values to 1em and the left and right padding values to zero. 2:27
    So now when I refresh the page notice how the top 2:33
    padding value in the header interrupts the two touching margins. 2:37
    The margins are no longer collapsing, so the gap between the body and 2:41
    header goes away. 2:45
    So, now that I have some padding around the content and 2:47
    the header, I'm going to give the H1 element are margin of zero. 2:50
    The H1 element inside the header has the class name. 2:55
    So back in my style sheet under the navigation comment, I'll create a new rule 3:00
    that targets name and I'll set its margin value to zero. 3:06
    This removes all the extra space above and below the name heading. 3:11
    You may also experience margins collapsing in other adjacent elements 3:17
    like paragraphs and divs. 3:22
    For instance, 3:23
    if a div's bottom margin is larger than the top margin of the div below it, 3:24
    the margin area between the divs collapses to the largest of the two margin values. 3:30
    Fortunately, we don't have to worry about horizontal margins collapsing 3:36
    because horizontal margins do not collapse. 3:40

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up