29

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Alex
  • 1,157
  • 3
  • 11
  • 25

4 Answers4

52

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    Oh my, I tried to remove body padding, but I didn't think of margin... I thought body was kind of the same thing as the window, and that their "limits" where located at the same place... I don't know if that's understandable.^^ Thanks anyway! – Alex Dec 31 '10 at 13:01
  • 3
    @Alex: The element that's more related to the *browser viewport* (so to speak) is `html`, not `body`. Check out [this answer](http://stackoverflow.com/questions/4565942/should-global-css-styles-be-set-on-the-html-element-or-the-body-element/4565959#4565959) for more. – BoltClock Dec 31 '10 at 13:05
9

An easy way to solve this problem is by getting rid of all the margins. And you can do that by the following code:

* {
    margin:0;
}

This will solve the problem and will give you finer control over the margins of all elements.

Bappy
  • 621
  • 1
  • 7
  • 16
  • 2
    It should be noted that this is an overkill solution and might be slow in some cases. –  Feb 24 '16 at 22:14
2

Add these to the style tag in body, like the following one:

body { margin:0px; padding:0px; }

It worked for me. Good luck!!

Kjartan
  • 18,591
  • 15
  • 71
  • 96
Tharindulucky
  • 65
  • 1
  • 12
1

I found this problem continued even when setting the BODY MARGIN to zero.

However it turns out there is an easy fix. All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below.

body { margin:0px; }

header { border:1px black solid; }

Not sure why this works, but I use Chrome browser. Obviously you can also change the colour of the border to match your header colour.

wardheed
  • 91
  • 4