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

Well done!

You have completed Mobile-First CSS Layout!

Sign up for Treehouse Back to Library

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

    So why is there a 21 pixel gap above the header? 0:00
    Shouldn't the header be at the top edge of the page? 0:02
    This is a common layout issue that happens with top and bottom margins. 0:06
    You will likely come across this issue a lot when building your layouts. 0:10
    In fact, many designers and 0:14
    developers run into this without realizing what it is or why it's happening. 0:15
    So, in this video, you'll learn why this happens and how to fix it. 0:20
    So the gap you're seeing above the header is actually the top margin 0:24
    of the H1 element. 0:28

    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