HTML：元素周围的空白，如何删除？

Question

我的网页包含几个 div。有些设置为 width: 100%，因此它们会填满整个页面宽度。但是在页面的顶部，在第一个元素出现之前有一个小的空白。此外，相同的空白在跨越整个页面宽度的元素的左右可见。

我不知道为什么。如果我设置：

 html, body {
width: 100%;
}

然后空白仍然存在，但页面只是被拉伸以适应 div 的图像宽度。

谁能帮忙？这可能很简单，但我必须忽略一些东西。谢谢你。

编辑：我必须提到我正在使用视差元素。这使用了填充，因此图像确实填充了整个 div，并且不会在顶部留下黑色区域。 HTML 是：

 <div class="js-background-1 container">
</div>

CSS：

 .container {
    padding-top: 200px;
}

.js-background-1 {
    background: transparent url(url/to/image) center 0 no-repeat;
}

和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>

我使用了来自 http://www.webdesign.org/how-to-create-a-parallax-scrolling-website.22336.html 的教程，所以它来自哪里。我为我的网站稍微更改了 HTML，但其余部分是一样的。

我看到关于 margin 和 padding 设置为 0 的评论，但是如果你滚动得不够远，这会导致我的 div 有一个空白区域。

原文由 B_s 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须删除 body 上的边距：

 body {
    padding:0;
    margin:0;
}

您还可以删除 html 和 body 上的填充和边距

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

在 jsfiddle 上查看

但我 不建议 使用 * （通用选择器）

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

这将删除 所有 元素的填充和边距。

原文由 Sébastien 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

padding-bottom: 20px;
border: 1px solid red !important;
margin: 0;
padding: 0;
width: 100%;

原文由 Deo Obordo Icao 发布，翻译遵循 CC BY-SA 4.0 许可协议