Html 去除div左上角和右上角的空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6619555/
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
Removing space at the top left and right of div
提问by Bruce
I am starting to work with css and have basic issue.
我开始使用 css 并遇到基本问题。
I have a div element:
我有一个 div 元素：
.top {
background-color: #3B5998;
margin-left: 0px;
margin-top: 0px
}<div class="top">...</div>The colour code is taking effect (good).
颜色代码正在生效（良好）。
The problem I have is that there seems to be a bit of white space on left, top and right of the div. How do I get rid of the white space? For example if you take a look at Facebook page, the top part is completely blue, there is no white space at the top.
我遇到的问题是div 的左侧、顶部和右侧似乎有一些空白。如何摆脱空白？例如，如果您查看 Facebook 页面，顶部是完全蓝色的，顶部没有空白。
回答by rolling stone
You need to reset both the default paddingand marginattributes in your stylesheet:
您需要重置样式表中的默认填充和边距属性：
html, body {
margin: 0;
padding: 0;
}
As @Jason McCreary mentions, you should also look into using a reset stylesheet. The one he links to, Eric Meyer's CSS reset, is a great place to start.
正如@Jason McCreary 所提到的，您还应该考虑使用重置样式表。他链接到的那个，Eric Meyer 的 CSS reset，是一个很好的起点。
It also looks like you're missing a semi-colon in your css, it should look as follows:
看起来您的 css 中也缺少分号，它应该如下所示：
.top
{
background-color:#3B5998;
margin-left:0px;
margin-top:0px;
}
回答by Marty
There's paddingon the <body>of the page. You can fix this like so:
还有padding在<body>页面的。你可以像这样解决这个问题：
body
{
padding: 0;
}
回答by mhk
I had the same problem . just try this :
我有同样的问题 。试试这个：
html, body {
margin-top:-13px;
}
回答by kheya
If you need some padding inside the div, you should choose padding:
如果您需要在 div 内填充一些填充，则应选择填充：
padding:top right bottom left;
example:
例子：
padding:5px; /* 5px padding at all sides)*/
padding:5px 3px; /* top & bottom 5px padding but right left 3px padding) */
padding:5px 3px 4px; /* top 5px, bottom 4px padding but left right 3px) */
padding:1px 2px 3px 4px; /* top 1px, right 2px bottom 3px & left 4px) */
Similarly to control the space outside the div, you can use margin.
同样要控制div外的空间，可以使用margin。
Margin will use exact same formula.
保证金将使用完全相同的公式。
回答by monteirobrena
After long time I found the correct solution for me:
很长一段时间后，我为我找到了正确的解决方案：
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
We need define the overflow in the horizontal.
我们需要定义水平溢出。
回答by Noumenon
If other answers don't work, try position:absolute; top: 0px; left: 0px;or display:flex.
如果其他答案不起作用，请尝试position:absolute; top: 0px; left: 0px;或display:flex。
回答by Ananda
margin: 0px; would remove all spaces around the element.
边距：0px；将删除元素周围的所有空格。
padding: 0px; clears the area around the content
填充：0px；清除内容周围的区域
you can try:
你可以试试：
html, body {margin: 0px; padding:0px;}
body {margin: auto;}
with margin:auto; the browser calculates a margin.
带保证金：自动；浏览器计算保证金。
You can also use
你也可以使用
* {margin: 0px; padding: 0px;}
this will remove all default margins and spaces. But be careful while using:
这将删除所有默认边距和空格。但使用时要小心：
position: absolute;
The 'position' property can take 4 values, static, relative, fixed and absolute. Then you can use top, bottom, left, right properties to position your element. This depends on your layout. This link might be useful https://www.w3schools.com/css/css_margin.asp
'position' 属性可以取 4 个值，静态、相对、固定和绝对。然后您可以使用顶部、底部、左侧、右侧属性来定位您的元素。这取决于您的布局。此链接可能有用https://www.w3schools.com/css/css_margin.asp
回答by George Zaharia
the issue i had lately also, but even though i used padding:0px even added the !important on body didn't solved it... the actual problem was its position ... which you can do by using background-position:50% 50%; or by automatically let it choose the center position of the screen .. which is margin:0 auto; or margin:auto; that solved it for me ... hope for you all also. i realized the margin is what was needed after i tried @HAS's response thanks man ur awesome ... sorry for zombify the post
我最近也遇到了这个问题，但即使我使用了 padding:0px 甚至在 body 上添加了 !important 也没有解决它......实际问题是它的位置......你可以使用 background-position:50 % 50%; 或者通过自动让它选择屏幕的中心位置..这是 margin:0 auto; 或保证金：自动；这为我解决了它......也希望你们所有人。在我尝试了@HAS 的回复后，我意识到保证金是所需要的，谢谢你太棒了......抱歉让帖子变得僵化
回答by Marcos
I used this and it worked for me:
我使用了这个，它对我有用：
body {
background-position: 50% 50%;
margin:0px;
padding:0px !important;
height:100%;
}
