it-swarm.com.ru

Как убрать пространство вокруг тела или очистить стили 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>

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

Extra space around a div element

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

25
Anthony

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

38
Roko C. Buljan

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

body{
padding:0px;
margin:0px;
}
8
Kevin Bowersox

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

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

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

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

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

body { margin: 0; padding: 0; }
3
Guffa

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

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

body { margin:0px; }

header { border:1px black solid; }

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

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

2
wardheed

Пойти с этим

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

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