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
mrx3
8,742 PointsFigured out my padding, but I don't know how or why this worked. Can someone help me with why this worked.
I just want to start out by saying, I practice making a new website everyday. I try to make each one a little different so I get new challenges, problems to solve. I learn by hands on experimentation. I take what Guil and Nick show in the video and practice for hours,(3:00 pm til 7:00 pm) I love making sites it's so much fun. I've learned many new ideas from Guil, Nick, and the great people on this forum, for which I'm very thankful to each and every person here. I seem to be having a real hard time with "collapsing margins" or "white-space" between headers, navs, and main body content. I understand that setting margin to 0 will eliminate most collapsing margins. But, in this example I had to add padding to my .main-content section 25px this took care of the margin collapse between the bottom of my nav and my .main-content section. I'm wondering why padding worked, and not margin? My code pen link is below, if someone could edit my code pen so they could see http://codepen.io/mike316/pen/HxFkA what I'm talking about, and explain why this worked would be great. The section of css that fixed the white space is:
/*****************************
.main-content section: adding
a background, and some style
to this part.
*****************************/
.main-content {
background: #808080;
padding: 15px;
}
If I take out the padding the margin collapse returns. I understand that margin create space around the elements, and padding makes a element bigger. Thank you for any help.
3 Answers
Bryan Jenkins
5,438 PointsThis is a common issue with browser specific styling. Chrome adds a 1em margin before and after all header tags by default.
I suggest using a great stylesheet by Eric Meyer and just include it in all your projects before your own stylesheet. http://meyerweb.com/eric/tools/css/reset/reset.css
This code will fix your issue
h4 {
-webkit-margin-before: 0;
}
Bryan Jenkins
5,438 PointsJames Barnett normalize was not working for him. Normalize leaves the WebKit prefixes that add margin to the tops of header tags. Perhaps he should just add the code to fix the margins manually, but I would argue that, in his case, a reset is better. Did you look at his project? It would be of more benefit to him to have no unexpected margins or paddings than it would be have a standardized styling across browsers.
James Barnett
39,199 PointsHe already removed margin from 7 elements but he forgot 1, using reset.css seems like throwing the baby out with the bathwater.
Bryan Jenkins
5,438 PointsThat's true, but as a beginner it's difficult to know what you need to remove margins from. HoW was he suppose to know he forgot one? When starting out, at least in my case, paddings, margins, and styles that I did not set were the most frustrating aspect of CSS. (I started before firebug and dev tools in chrome). Normalize is great once you know what style your getting with it but when your trying to practice manipulating elements on you own and styling a new site for practice, a reset is a better choice than normalize. Had he just included a reset and not normalize, he wouldn't have to add padding to an element and wonder why he needed to do that. It would have just done exactly what his stylesheet said to do because every default style was removed with the reset.
James Barnett
39,199 PointsBefore there was firebug using a reset probably made it easier to use CSS. Now that we have firebug (and it's counterparts) using normalize works better, if there is something amiss with your margins or padding you learn to use the box model view which started out in Firefox's inspector and now is in Chrome as well.
> Had he just included a reset and not normalize, he wouldn't have to add padding to an element and wonder why he needed to do that.
That might break more things than it fixes in the long run.
Back to my original point ...
Don't use normalize.css and then reset.css as it will remove all the normalizations.
You should have said instructed him to use reset.css instead of normalize.css but in your suggestion you've got dozen of lines of CSS from normalize.css that are being downloaded by the browser but the rules are being unused and that's not a good idea.
mrx3
8,742 PointsThanks for all the replies, I really appreciate it. Did I do the right thing adding padding to snug up the site, or should I do something else? I thought it was okay to use margin 0 to snug up each section of the site. Thanks again James and Byran for the help.
James Barnett
39,199 Points> I thought it was okay to use margin 0 to snug up each section of the site
That's correct, you should use margin: 0 to remove margin that is pushing apart containers.
mrx3
8,742 Pointsmrx3
8,742 PointsOkay now that would go after the normalize I take it but before the external CSS style sheet? And thank you for the help.
Bryan Jenkins
5,438 PointsBryan Jenkins
5,438 PointsYou got it
James Barnett
39,199 PointsJames Barnett
39,199 Points>Okay now that would go after the normalizeThere's no need to use both reset.css and normalize.css. You should just be using normalize.css.