CSS: Как я могу избавиться от окна "padding" по умолчанию? Элемент, установленный на 100% ширину, не достигает границ окна

Итак, у меня есть элемент, который помещается непосредственно внутри тела:

<body>
    <div id="header">Some stuff...</div>
    Other stuff...
</body>

Ниже используется CSS:

body{
    text-align:center;
}
#header{
    margin:auto;
}

Таким образом, div #header устанавливается на 100% ширину (по умолчанию) и центрируется. Проблема в том, что существует "пробел" между границей окна и элементом #header... Например:

|  |----header----|   |
^window border        ^window border

Я попытался настроить его с помощью javascript, и он успешно изменяет размер элемента до точной ширины окна, но он не устраняет "пробел":

$('#header').width($(window).width());

Одним из решений является добавление следующих правил CSS (и сохранение javascript выше):

#header{
    margin:auto;
    position:relative;
    top:-8px;
    left:-8px;
}

В моем браузере это "пространство" - 8 пикселей, но я не уверен, что это одно и то же во всех браузерах? Я использую Firefox на Ubuntu...

Итак, какой правильный способ избавиться от этого пространства - и если это то, что я использовал выше, делают ли все браузеры одинаковыми?

Ответы

Ответ 1

body имеет поля по умолчанию для всех браузеров, поэтому все, что вам нужно сделать, это сэкономить:

body {
    margin: 0;
    text-align: center;
}

Затем вы можете удалить отрицательные поля из #header.

Ответ 2

Легкий способ решить эту проблему - избавиться от всех полей. И вы можете сделать это с помощью следующего кода:

* {
    margin:0;
}

Это решит проблему и даст вам более тонкий контроль над полями всех элементов.

Ответ 3

Добавьте их в тег style в body, например, следующий:

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

Это сработало для меня. Удачи!

Ответ 4

Я нашел, что эта проблема продолжалась даже при установке BODY MARGIN в ноль.

Однако оказывается, что есть легкое исправление. Все, что вам нужно сделать, это дать вашему телу HEADER 1px границу, а также установить значение BODY MARGIN равным нулю, как показано ниже.

body { margin:0px; }

header { border:1px black solid; }

Не знаю, почему это работает, но я использую браузер Chrome. Очевидно, вы также можете изменить цвет рамки в соответствии с цветом заголовка.