Html 如何删除正文周围的边距空间或清除默认的 css 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9547291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove margin space around body or clear default css styles
提问by Anthony
I am admittedly a beginner, but I also did a fair amount of searching before posting this. There seems to be extra space around my div element. I also would like to point out that I tried many combinations of border: 0, padding:0, etc. and nothing seemed to get rid of the white space.
诚然，我是初学者，但在发布此内容之前，我也进行了大量搜索。我的 div 元素周围似乎有额外的空间。我还想指出，我尝试了许多边框组合：0、填充：0 等，但似乎没有任何东西可以摆脱空白。
Here is the code:
这是代码：
<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>
This is what it looks like (I inserted red arrows to explicitly call out the extra space):
这是它的样子（我插入了红色箭头以明确标出额外的空间）：
I was expecting the blue color to abut directly to the browser edges and toolbar. The images are both exactly 64 pixels tall and have the same background color as the one assigned to #header_div. Any information would be greatly appreciated.
我期待蓝色直接与浏览器边缘和工具栏相邻。这些图像都正好是 64 像素高，并且具有与分配给 #header_div 的背景颜色相同的背景颜色。任何信息将不胜感激。
回答by Roko C. Buljan
bodyhas default margins: http://www.w3.org/TR/CSS2/sample.html
body有默认边距：http: //www.w3.org/TR/CSS2/sample.html
body { margin:0; } /* Remove body margins */
Or you could use this useful Global reset
或者你可以使用这个有用的全局重置
* { margin:0; padding:0; box-sizing:border-box; }
If you want something less *globalthan:
如果你想要的东西不那么*全球化：
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;
}
some other CSS Reset:
其他一些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/
…
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/
...
回答by Kevin Bowersox
try removing the padding/margins from the body tag.
尝试从 body 标签中删除填充/边距。
body{
padding:0px;
margin:0px;
}
回答by Alex
try to ad the following in your CSS:
尝试在您的 CSS 中添加以下内容：
body, html{
padding:0;
margin:0;
}
回答by Guffa
That's the default margin/padding of the bodyelement.
这是body元素的默认边距/填充。
Some browsers have a default margin, some a default padding, and both are applied as a padding in the body element.
一些浏览器有一个默认的边距，一些默认的内边距，并且两者都作为 body 元素中的内边距应用。
Add this to your CSS:
将此添加到您的 CSS：
body { margin: 0; padding: 0; }
回答by wardheed
I found this problem continued even when setting the BODY MARGIN to zero.
我发现即使将 BODY MARGIN 设置为零，这个问题仍然存在。
However it turns out there is an easy fix. All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below.
然而，事实证明有一个简单的解决方法。你需要做的就是给你的 HEADER 标签一个 1px 的边框，并将 BODY MARGIN 设置为零，如下所示。
body { margin:0px; }
header { border:1px black solid; }
If you have any H1, H2, tags within your HEADER you will also need to set the MARGIN for these tags to zero, this will get rid of any extra space which may show up.
如果您的 HEADER 中有任何 H1、H2 标签，您还需要将这些标签的 MARGIN 设置为零，这将消除可能出现的任何额外空间。
Not sure why this works, but I use Chrome browser. Obviously you can also change the colour of the border to match your header colour.
不知道为什么会这样，但我使用 Chrome 浏览器。显然，您也可以更改边框的颜色以匹配您的标题颜色。
回答by Amit Mahnot
Go with this
用这个去
body {
padding:0px;
margin:0px;
}
回答by Daniel
I had the same problem and my first <p>element which was at the top of the page and also had a browser webkit default margin. This was pushing my entire div down which had the same effect you were talking about so watch out for any text-based elements that are at the very top of the page.
我遇到了同样的问题，我的第一个<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>
So just remember to check all child elements not only the html and body tags.
因此，请记住检查所有子元素，而不仅仅是 html 和 body 标签。
