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

Posted 2023-03-06

【中文标题】HTML：元素周围的空白，如何删除？

【英文标题】：HTML: white space around elements, how to remove?

【发布时间】：2013-11-22 11:13:25

【问题描述】：

我的网页包含多个 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，但其余部分相同。

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

【问题讨论】：

你能在 JsFiddle.net 上复制这个问题吗？也请在您的问题中在这里发布您的 HTML 和 CSS。

我更新了我的问题，包括代码。

【参考方案1】：

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

【讨论】：

试试这个，把它放在body上，然后调整重叠的内容。修好后，去掉body上的这条线：border: 1px solid red !important;

【参考方案2】：

您必须删除body 上的边距：

body 
    padding:0;
    margin:0;

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

html, body 
    padding:0;
    margin:0;

See it on jsfiddle

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

* 
    margin: 0px;
    padding: 0px;

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

【讨论】：

是的！我在 html 和 body 上设置了填充和边距，这就像一个魅力。 div 内的填充保持不变，但周围的空白消失了。谢谢！

【参考方案3】：

最好的方法是始终在文件开头使用（我忘了提这个）：

*
    margin: 0px;
    padding: 0px;

这两行位于主 CSS 文件的开头，解决了您可能遇到的许多问题。 希望对你有帮助。

【讨论】：

请注意，这会删除所有元素的边距。

感谢您的帮助，但是（我知道我迟到了）我使用了一个需要内部填充的视差元素。将 * 更改为 'html, body' 就可以了。

这会覆盖div 类的边距和内边距吗？