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

时间:2013-11-10 17:54:23

标签: image html width whitespace

我的网页包含几个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有一个空格。

2 个答案:

答案 0 :(得分:8)

您必须删除body上的边距:

body {
    padding:0;
    margin:0;
}

您还可以删除htmlbody

上的填充和边距
html, body {
    padding:0;
    margin:0;
}

See it on jsfiddle

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

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

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

答案 1 :(得分:0)

好的方法是始终在文件的开头使用(我忘记了这个):

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

这两行在主CSS文件的开头修复了许多你可以遇到的问题。 希望它能帮到你。