如何删除正文周围的边距空间或清除默认 CSS 样式
[英]How to remove margin space around body or clear default css styles
问题描述
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.我的 div 元素周围似乎有额外的空间。 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.我还想指出，我尝试了许多边框组合：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.这些图像的高度均为 64 像素，并且与分配给 #header_div 的图像具有相同的背景颜色。 Any information would be greatly appreciated.任何信息将不胜感激。
7 个解决方案
解决方案1
76 已采纳 2012-03-03 15:36:20
body has by default 8px margins: http://www.w3.org/TR/CSS2/sample.html body默认有8px边距： 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 * global than:如果你想要一些比*更少的全局：
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://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/ http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/ https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/ http://html5doctor.com/html-5-reset-stylesheet/
… …
解决方案2
10 2012-03-03 15:36:43
try removing the padding/margins from the body tag.尝试从正文标签中删除填充/边距。
body{
padding:0px;
margin:0px;
}
解决方案3
4 2012-03-03 15:34:54
try to ad the following in your CSS:尝试在您的 CSS 中添加以下内容：
body, html{
padding:0;
margin:0;
}
解决方案4
3 2012-03-03 15:35:41
That's the default margin/padding of the body element.这是body元素的默认边距/填充。
Some browsers have a default margin, some a default padding, and both are applied as a padding in the body element.有些浏览器有默认边距，有些有默认内边距，两者都作为正文元素中的内边距应用。
Add this to your CSS:将此添加到您的 CSS 中：
body { margin: 0; padding: 0; }
解决方案5
2 2015-11-02 12:47:12
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.不知道为什么会这样，但我使用 Chrome 浏览器。 Obviously you can also change the colour of the border to match your header colour.显然，您还可以更改边框的颜色以匹配您的标题颜色。
解决方案6
2 2016-08-05 04:38:17
Go with this和这个一起去
body {
padding:0px;
margin:0px;
}
解决方案7
0 2017-12-19 02:57:19
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.我遇到了同样的问题，我的第一个<p>元素位于页面顶部，并且还有一个浏览器 webkit 默认边距。 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.这将我的整个 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 标签。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.