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

【问题标题】：How to remove margin space around body or clear default css styles如何删除正文周围的边距空间或清除默认 CSS 样式
【发布时间】：2012-03-21 18:46:32
【问题描述】：

诚然，我是初学者，但在发布此内容之前，我也进行了大量搜索。我的 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>

这就是它的样子（我插入了红色箭头以明确指出多余的空间）：

我期待蓝色直接与浏览器边缘和工具栏相邻。这些图像的高度均为 64 像素，并且与分配给 #header_div 的图像具有相同的背景颜色。任何信息将不胜感激。

【问题讨论】：

使用 Google Chrome 或 Firefox web-developer 插件检查您的元素，以查看应用了哪些样式。它可能是页面头部或 html 元素的边距或填充。
找出空间来自何处的一个简单技巧是将每个元素的背景颜色设置为不同的颜色。以及使用工具检查元素...

标签： html css margin css-reset

【解决方案1】：

body 默认 8px 边距：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 重置：

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

【讨论】：

感谢大家的帮助！我首先尝试了这个作为“本垒打”解决方案，并且效果很好。问题解决了！

【解决方案2】：

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

【讨论】：

【解决方案3】：

去吧

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

【讨论】：

【解决方案4】：

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

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

body { margin:0px; }

header { border:1px black solid; }

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

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

【讨论】：

【解决方案5】：

尝试在您的 CSS 中添加以下广告：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

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

将此添加到您的 CSS：

body { margin: 0; padding: 0; }

【讨论】：