Как убрать пространство вокруг тела или очистить стили CSS по умолчанию - PullRequest
Новая
       42

Как убрать пространство вокруг тела или очистить стили CSS по умолчанию

30 голосов
/ 03 марта 2012

По общему признанию, я новичок, но я также провел много поисков, прежде чем опубликовать это. Кажется, вокруг моего элемента div есть дополнительное пространство. Я также хотел бы отметить, что я пробовал много комбинаций границ: 0, отступов: 0 и т. Д., И ничто, казалось, не избавляло от пробела.

Вот код: 

<html>
<head>
    <style type="text/css">
        #header_div  {
            background: #0A62AA;
            height: 64px;
            min-width: 500px;
        } 
        #vipcentral_logo { float:left;  margin: 0 0 0 0; }
        #intel_logo      { float:right; margin: 0 0 0 0; }
    </style>
</head>
<body>
    <div id="header_div">
        <img src="header_logo.png" id="vipcentral_logo">
        <img src="intel_logo.png" id="intel_logo"/>
    </div>
</body>

Вот как это выглядит (я вставил красные стрелки, чтобы явно вызвать дополнительный пробел):

Extra space around a div element

Я ожидал, что синий цвет упирается прямо в края браузера и панель инструментов. Оба изображения имеют высоту ровно 64 пикселя и имеют тот же цвет фона, который назначен #header_div. Любая информация будет принята с благодарностью.

Ответы [ 7 ]

46 голосов
/ 03 марта 2012

body имеет поля по умолчанию: http://www.w3.org/TR/CSS2/sample.html 

body { margin:0; } /* Remove body margins */

Или вы можете использовать это полезное Глобальный сброс 

* { margin:0; padding:0; box-sizing:border-box; }

Если выхотите что-то меньшее * global чем: 

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

некоторые другие Сброс CSS :

http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
…

9 голосов
/ 03 марта 2012

попробуйте удалить отступы / поля из тега body. 

body{
padding:0px;
margin:0px;
}
3 голосов
/ 03 марта 2012

Это поле / отступ по умолчанию для элемента body.

Некоторые браузеры имеют поля по умолчанию, некоторые - отступы по умолчанию, и оба применяются как заполнение в элементе body.

Добавьте это к своему CSS: 

body { margin: 0; padding: 0; }
3 голосов
/ 03 марта 2012

попробуйте добавить следующее в ваш CSS: 

body, html{
    padding:0;
    margin:0;
}
2 голосов
/ 02 ноября 2015

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

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

body { margin:0px; }

header { border:1px black solid; }

Если у вас есть какие-либо теги H1, H2, внутри вашего HEADER, вам также нужно будет установить MARGIN для этих тегов на ноль, это избавит от любого дополнительного пространства, которое может появиться.

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

0 голосов
/ 19 декабря 2017

У меня была та же проблема и мой первый элемент <p>, который находился вверху страницы и также имел поле по умолчанию для веб-браузера. Это давило на весь мой div, что имело тот же эффект, о котором вы говорили, так что следите за текстовыми элементами, которые находятся в самом верху страницы. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body style="margin:0;">
      <div id="image" style="background: url(pixabay-cleaning-kids-720.jpg) 
no-repeat; width: 100%; background-size: 100%;height:100vh">
<p>Text in Paragraph</p>
      </div>
    </div>
  </body>
</html>

Так что не забудьте проверить все дочерние элементы, а не только теги html и body.

0 голосов
/ 05 августа 2016

Иди с этим 

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