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

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

Я, по общему признанию, новичок, но я также сделал довольно много поисков, прежде чем публиковать это. Кажется, есть дополнительное пространство вокруг моего элемента div. Я также хотел бы отметить, что я пробовал много комбинаций border: 0, padding: 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. Любая информация будет принята с благодарностью.

4b9b3361

Ответ 1

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

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

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

* { 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 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/
& Hellip;

Ответ 2

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

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

Ответ 3

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

body, html{
    padding:0;
    margin:0;
}

Ответ 4

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

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

Добавьте это в свой CSS:

body { margin: 0; padding: 0; }

Ответ 5

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

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

body { margin:0px; }

header { border:1px black solid; }

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

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

Ответ 6

Пойдите с этим

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

Ответ 7

У меня была такая же проблема, и мой первый элемент <p>, который был наверху страницы, а также имел маркер по умолчанию для webkit браузера. Это подтолкнуло мой весь 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.