HTML：元素周围的空白，如何删除？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19893019/
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
HTML: white space around elements, how to remove?
提问by B_s
My webpage contains several divs. Some are set to width: 100%, so they fill the whole page width. But at the top of the page there is a small whitespace before the first element shows up. Moreover, that same whitespace is visible left and right from elements spanning the whole page width.
我的网页包含几个 div。有些设置为 width: 100%，因此它们填充整个页面宽度。但是在页面顶部在第一个元素出现之前有一个小空格。此外，从跨越整个页面宽度的元素左右可见相同的空白。
I cannot figure out why. If I set:
我不明白为什么。如果我设置：
html, body {
width: 100%;
}
then the whitespace remains but the page is just stretched out to fit the image width of a div.
然后空白仍然存在，但页面只是被拉伸以适应 div 的图像宽度。
Can anyone help? It's probably pretty simple but I must be overlooking something. Thank you.
任何人都可以帮忙吗？这可能很简单，但我必须忽略一些东西。谢谢你。
EDIT: I must mention I'm using a parallax element. This uses a padding, so the image does fills the whole div and does not leave a black area on top. The HTML is:
编辑：我必须提到我正在使用视差元素。这使用了填充，因此图像确实填充了整个 div，并且不会在顶部留下黑色区域。HTML是：
<div class="js-background-1 container">
</div>
The CSS:
CSS：
.container {
padding-top: 200px;
}
.js-background-1 {
background: transparent url(url/to/image) center 0 no-repeat;
}
And the javascript:
和 javascript：
<script type="text/javascript">
var $window = $(window);
var velocity = 0.4;
function update(){
var pos = $window.scrollTop();
$('.container').each(function() {
var $element = $(this);
var height = $element.height();
$(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');
});
};
$window.bind('scroll', update);
</script>
I used the tutorial from http://www.webdesign.org/how-to-create-a-parallax-scrolling-website.22336.html, so there is where it is from. I changed the HTML a bit for my website, but the rest is the same.
我使用了http://www.webdesign.org/how-to-create-a-parallax-scrolling-website.22336.html 中的教程，所以它来自哪里。我为我的网站稍微更改了 HTML，但其余部分相同。
I saw the comment about the margin and padding set to 0, but that leads to my div to have a blank space if you don't scroll far enough.
我看到关于边距和填充设置为 0 的评论，但是如果滚动不够远，这会导致我的 div 有一个空白区域。
采纳答案by Sébastien
You must remove the margin on body:
您必须删除 上的边距body：
body {
padding:0;
margin:0;
}
You can also remove padding and margin on htmland body
您也可以去除填充和保证金html和body
html, body {
padding:0;
margin:0;
}
But I would not adviseto use *(the universal selector)
但我不建议使用*（通用选择器）
* {
margin: 0px;
padding: 0px;
}
This would remove padding and margins on allelements.
这将删除所有元素的填充和边距。
回答by Jakub Mendyk
The good method is to always use at the begining of the file (I forgot to metion this):
好的方法是始终在文件开头使用（我忘了提到这一点）：
*{
margin: 0px;
padding: 0px;
}
This two line's at the begining of main CSS file fix many problem's that you can encounter. Hope it'll help you.
这两行位于主 CSS 文件的开头，修复了您可能遇到的许多问题。希望它会帮助你。
