Question

我是网页设计的新手并遇到了这个问题;我有两个部分，每个部分都有其赢得的背景图像。但是，第一个背景图像不会在前一个背景图像之后结束。相反，两个图像之间有一个看起来很可怕的空白。

CSS：

#slide-1 .bcg {
  background-image:url('http://upload.wikimedia.org/wikipedia/commons/1/15/Hopwas_Woods_Sun.jpg');  
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 800px;
  width: 100%;
}
#slide-2 .bcg{
  background-image:url('http://i953.photobucket.com/albums/ae11/Kronstadt/Shabby-Princess-Kristie_SF_StripedP.jpg');
  background-position: center center;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
  width: 100%;
}

Answer 1

我不确定，但也许您在寻找CSS Reset？

只需在css代码顶部写* { margin: 0; padding: 0; }即可。否则，如果您遇到内联元素的其他空白问题，可以使用font-size: 0;在受影响元素的容器上修复它们。

Answer 2

您还可以在

中保留hx和p元素的边距

将边框设置为第一个子div。的 Borders

section>div { border:1px solid transparent }

或 padding 会：

section div { padding:1px; }

要了解正在发生的事情，您可以阅读 this article 。

Answer 3

将此添加到您的CSS：

*{
    padding: 0;
    margin: 0;
}

这会将所有元素的边距和填充设置为零。

Answer 4

使用Sublime Text，您必须将元素放在另一个元素旁边。

<section>
 <div></div>
</section>
<section>
<div></div>
</section>

应该成为：

<section>
 <div></div>
</section><section>
 <div></div>
</section>

如何摆脱CSS / HTML部分之间的空白

4 个答案: