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
Aondre Franklin
Courses Plus Student 13,845 PointsQuestion about margins
Hey. I wanted the top half of my page to be blue and there seems to be a bit of white left. I'm trying to figure out why that is because I thought I removed the bit of margin in the page that would cause this. Can someone tell me what I'm missing?
My code: http://codepen.io/Deree18/pen/YwMxpB
3 Answers
Austin Whipple
29,847 PointsTo expand on David's answer, it's actually the top margin of the h1 element as well as both p elements in your header.
This is a fun/frustrating issue known as margin collapse. It can be solved a number of ways including setting the margin-top of all elements in that parent to 0 or add display:inline-block to your header. While it's not always recommended, you can also use:
* {
margin: 0;
padding: 0;
}
This removes any default margin/padding added by the browser to all elements on the page. It should be noted that floated items never cause margin collapse.
David Finley
18,742 PointsThat white space at the top is actually the top margin from your h1 element.
Aondre Franklin
Courses Plus Student 13,845 PointsThanks for the save, David and Austin.