HTML:元素周围的空白区域,如何删除？

Question

我的网页包含几个div.有些设置为宽度: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,但其余的都是一样的.

我看到关于边距和填充的注释设置为0,但如果你滚动得不够远,那导致我的div有一个空格.

Answer 1

您必须删除保证金body:

body {
    padding:0;
    margin:0;
}

您也可以去除填充和保证金html和body

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

在jsfiddle上看到它

但我不建议使用*(通用选择器)

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

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