gpt4 book ai didi

image - HTML:元素周围的空白,如何删除?

转载 作者:太空狗 更新时间:2023-10-29 13:27:56 26 4
gpt4 key购买 nike

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

我想不通为什么。如果我设置:

html, body {
width: 100%;
}

然后空白仍然存在,但页面只是被拉伸(stretch)以适应 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 有一个空白区域。

最佳答案

您必须删除 body 上的边距:

body {
padding:0;
margin:0;
}

您还可以删除 htmlbody

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

See it on jsfiddle

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

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

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

关于image - HTML:元素周围的空白,如何删除?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19893019/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com