So, I’m trying to figure out why there are margins around my website between the site and the browser?
http://deva.bambl.clients.blinkss.com/index.html
What should I change?
I believe that everything is fine with the container
#BiggestContainer {
margin:0 auto;
background-image:url(IMAGES/Metal_platform_bg_Image.png);
}
Thanks!
That’s just a browser default. You need this:
body {margin: 0}
But you might as well zero out padding too:
body {margin: 0; padding: 0;}
Most elements have default styles, so it’s worth considering a “CSS reset” where you remove all defaults in one hit. E.g.
html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}
PS: your link didn’t work for me.
Hmmm about the link, but thanks you solved my problem!
Hm, I know “CSS resets” are popular but I hate them, am I the only one? Browsers provide certain defaults to each element so that they render in a readable way, I don’t understand why I would want to clear them?
For example, if I reset ul and li then their rendering becomes ugly and unacceptable in most cases. If I leave the defaults at least the lists look sensible and I may get away without styling them at all. Then why add more work? When I want a specific styling I simply declare it explicitely and it works without the need to reset anything. Instead of resetting everything I much prefer simply setting my required styles on the elements that I need to affect.
I agree that weird lists are one of the troublesome side effects of resets.
I’ve recently started using normalize in favor of resets.
Yes, that’s the most efficient way, though it’s easy to forget what you have and haven’t reset, which could mean you do more resetting than necessary. I like to start with a blank slate, which is why I’m still a bit attaced to resets.
Yes, I agree that resets are not the real answer and you don’t actually want to clear the defaults but need to set them to what the design needs to be. However, doing nothing is not the answer either because browsers have different defaults.
Lists for example are awkward if you don’t set a suitable default because browsers vary so much. Historically some browsers used padding left for the space for the bullet and some browsers used margin-left to make space for the bullet therefore if you only added padding-left some browsers would have double the space for the bullets.
The same applies to top and bottom margins on most elements and IE7 and under never used to apply a default top margin and only supplied a bottom margin therefore elements were always awry unless you specifically set all margins as required.
So, one answer is to set the defaults that you want on the elements you use but in order to do that you need to know (or have a good idea) what defaults the browser is applying. Most people don’t realise that padding and margins need to be controlled for lists and would wonder why the lists were miles out in one browser.
There were/are many other differences and forms in IE always had a large top margin in IE but not in any other browser and even Ralph’s body{margin:0} mentioned above would fail because some browsers used padding for the default space and not margin and some applied it to html and not body.
These days modern browsers are more consistent but there are still differences and in the end its the design that you are coding that is important to have the defaults that you want and not what some browsers thinks you may want.
All of the above is the reasons why resets became popular as it took care of everything for you but really was overkill and you ended up having to again define the margins and padding you wanted anyway.