HTML：元素周围的空白区域，如何删除？ [英] HTML: white space around elements, how to remove?

问题描述

我的网页包含多个div。有些设置为宽度：100％，因此它们会填充整个页面宽度。
但是在页面的顶部，在第一个元素出现之前有一个小的空白。而且，同样的空白可以从整个页面宽度的元素左右看到。

我找不出原因。如果我设置：

  html，body {
 width：100％; 
} 
  

然后保留空白，但页面只是展开以适合图片宽度的分区。

任何人都可以帮忙吗？这可能很简单，但我必须忽略一些东西。
谢谢。

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

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

CSS：

  .container {
 padding-top：200px; 
 
 
 .js-background-1 {
 background：透明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（）; 
 $ b $（'。container'）。each（function（）{
 var $ element = $（this）; 
 var height = $ element.height（）; $ b'b $ b $（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有一个空白区域。

  body {
 padding：0; 
保证金：0; 
} 
  

您也可以移除 html 和 body

  html，body {
填充：0; 
保证金：0; 
} 
  

在jsfiddle上查看

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

  * {
保证金：0px; 
 padding：0px; 
} 
  

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

My webpage contains several divs. Some are set to width: 100%, so they fill the whole page width. But at the top of the page there is a small whitespace before the first element shows up. Moreover, that same whitespace is visible left and right from elements spanning the whole page width.

I cannot figure out why. If I set:

html, body {
width: 100%;
}

then the whitespace remains but the page is just stretched out to fit the image width of a div.

Can anyone help? It's probably pretty simple but I must be overlooking something. Thank you.

EDIT: I must mention I'm using a parallax element. This uses a padding, so the image does fills the whole div and does not leave a black area on top. The HTML is:

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

The CSS:

.container { 
    padding-top: 200px;
}

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

And the 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>

I used the tutorial from http://www.webdesign.org/how-to-create-a-parallax-scrolling-website.22336.html, so there is where it is from. I changed the HTML a bit for my website, but the rest is the same.

I saw the comment about the margin and padding set to 0, but that leads to my div to have a blank space if you don't scroll far enough.

解决方案

You must remove the margin on body:

body {
    padding:0;
    margin:0;
}

You can also remove padding and margin on html and body

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

See it on jsfiddle

But I would not advise to use * (the universal selector)

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

This would remove padding and margins on all elements.

这篇关于HTML：元素周围的空白区域，如何删除？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！