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
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsI have a margin top on H2 and I don't know where 44px is coming from
I created a screenshot about this issue:
https://www.dropbox.com/s/eeqc6g72ynrww3p/question.png?dl=0
So my problem coming from margin. We set a bottom margin to H2, which is 26px, however in the developer tools I can see that there is a top margin as well for H2. My question is simple: why :) ? Because I can't see any code related to top margin.
5 Answers
furkan
11,733 PointsHave you used CSS reset properties to remove the default margins on the heading elements? If not, then set a global margin attribute in CSS with margin = 0. Also, apply box-sizing, like this:
* {
margin: 0;
box-sizing: border-box;
}
That might help!
furkan
11,733 PointsNo. That global one sets margin: 0 for all elements in the file, but when you write other code under that one, it will 'over write it'.
For example, if I do like below, then everything on the web page will have no margin.
*{
margin: 0;
}
But if I do like the one in the bottom in the second example:
*{
margin: 0;
}
h1{
margin: 10px;
}
Because the margin for h1 comes AFTER the global, it will over write that code and will still give the h1 a 10px margin. It is called CSS reset when we use the global.
Try these codes above, I hope it made sense.
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsAnd if work in an opposite way too? Like if I put the global code after my last code (so the global code will be the last) it will kill all margin? Because I checked and it kills the h1 default margin but leave the code I wrote before the global. Here you can see the workspace:
furkan
11,733 PointsIf you put global code last and give margin: 0, then all margin will be 0. But if you put global c9de first and add other codes under with different margins, then those codes will have margin.
In CSS, whatever comes last will have higher importance.
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsHm, that is why I don't understand. I put the code on my last line, however, the margins remained the same.
furkan
11,733 PointsNo put global code to very top. Because i looked at your code, you add your own margins to heading further down
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsYes, but I wanted to test/know that if I put my global 'kill all margin' code at the end will kill all the margins before it (even if I wrote some rules for h1 and so on). So my question is, that is it possible to kill all the margin rules I wrote with this single code at the end (because it's not working for me): * { margin: 0; box-sizing: border-box; }
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsPeter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsMany thanks for your quick answer. I'm going to check it ?
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsPeter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsJust checked. It's working. 1000 thanks. May I ask one more question regarding to the global stuff? If we set margin to 0 with the * , then how it's not overwriting all the other margins in CSS file, because this is the "strongest one"?