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

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

25 голосов
/ 31 декабря 2010

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

<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;
}

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

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

Ответы [ 4 ]

49 голосов
/ 31 декабря 2010

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

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

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

10 голосов
/ 28 августа 2013

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

* {
    margin:0;
}

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

2 голосов
/ 21 декабря 2012

Добавьте их к тегу style в body, как показано ниже: 

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

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

0 голосов
/ 02 ноября 2015

Я обнаружил, что эта проблема сохраняется даже при установке нулевого поля тела.

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

body { margin:0px; }

header { border:1px black solid; }

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

...