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

Я по общему признанию новичок, но я также сделал большое количество поиска прежде, чем отправлять это. Кажется, вокруг моего элемента 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>

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

Дополнительное пространство вокруг элемента div

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

Источник

7 ответов

Решение

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

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

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

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

Если вы хотите что-то меньшее * глобальный чем:

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 Reset:

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/
...

Источник

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

body{
padding:0px;
margin:0px;
}
Источник

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

body, html{
    padding:0;
    margin:0;
}
Источник

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

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

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

body { margin: 0; padding: 0; }
Источник

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

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

body { margin:0px; }

header { border:1px black solid; }

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

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

Источник

Пойти с этим

body {
    padding:0px;
    margin:0px;
}
Источник

У меня была такая же проблема и мой первый <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.

Источник
Другие вопросы по тегам