Question

我无疑是初学者，但在发布之前我也进行了大量的搜索。我的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的图像相同的背景颜色。任何信息都将不胜感激。

Answer 1

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重置 ：

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

Answer 2

尝试从正文标记中删除填充/边距。

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

Answer 3

尝试在CSS中添加以下内容：

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

Answer 4

这是body元素的默认边距/填充。

某些浏览器有默认边距，有些是默认填充，两者都作为填充应用于body元素。

将此添加到您的CSS：

body { margin: 0; padding: 0; }

Answer 5

即使将BODY MARGIN设置为零，我也发现这个问题仍然存在。

然而事实证明有一个简单的解决方法。您需要做的就是给HEADER标签一个1px边框，并将BODY MARGIN设置为零，如下所示。

body { margin:0px; }

header { border:1px black solid; }

如果你的HEADER中有H1，H2标签，你还需要将这些标签的MARGIN设置为零，这样就可以摆脱任何可能出现的额外空间。

不确定为什么会这样，但我使用Chrome浏览器。显然，您也可以更改边框的颜色以匹配标题颜色。

Answer 6

使用此

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

Answer 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标签。

如何删除正文周围的边距空间或清除默认的CSS样式

7 个答案: