46

诚然，我是一个初学者，但在发布之前我也进行了相当多的搜索。我的 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 的图像具有相同的背景颜色。任何信息将不胜感激。

4

7 回答 7

73

body默认 有8px边距：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/
...</p>

于 2012-03-03T15:36:20.817 回答
10

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

body{
padding:0px;
margin:0px;
}
于 2012-03-03T15:36:43.180 回答
4

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

body, html{
    padding:0;
    margin:0;
}
于 2012-03-03T15:34:54.530 回答
3

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

有些浏览器有默认边距，有些有默认内边距，两者都作为正文元素中的内边距应用。

将此添加到您的 CSS 中：

body { margin: 0; padding: 0; }
于 2012-03-03T15:35:41.190 回答
2

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

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

body { margin:0px; }

header { border:1px black solid; }

如果您的 HEADER 中有任何 H1、H2、标签，您还需要将这些标签的 MARGIN 设置为零，这将消除可能出现的任何额外空间。

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

于 2015-11-02T12:47:12.547 回答
2

和这个一起去

body {
    padding:0px;
    margin:0px;
}
于 2016-08-05T04:38:17.877 回答
0

我遇到了同样的问题，我的第一个<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 标签。

于 2017-12-19T02:57:19.303 回答