Menu
So I have an element that is placed directly inside body:
<body> <div id="header">Some stuff...</div> Other stuff... </body> The following is the CSS used:
body{ text-align:center; } #header{ margin:auto; } So the #header div is set to 100% width (default) and is centered. Problem is, there's a "space" between the window border and the #header element... Like:
| |----header----| | ^window border ^window border I tried adjusting it with javascript, and it successfully resizes the element to the exact window width, but it doesn't eliminate the "space":
$('#header').width($(window).width()); One solution seems to be to add the following CSS rules (and keep the javascript above):
#header{ margin:auto; position:relative; top:-8px; left:-8px; } In my browser this "space" is 8px - but I'm not sure if that's the same across all browsers? I'm using Firefox on Ubuntu...
So what's the right way for getting rid of this space - and if it's what I used above, do all browsers act the same?
811
You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .
The right answer for this question is "css reset". It removes all default margin and padding for every object on the page, no holds barred, regardless of browser.
No, element width does not include padding, margin, or border. The basic difference between padding and width is that in padding you define the space around the element and on the other hand in the width you define the space of the element.
body has default margins on all browsers, so all you need to do is shave them off:
body { margin: 0; text-align: center; } You can then remove the negative margins from #header.
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
