Question

根据this article进行简单的视差效果。我无法理解为什么div之间有空格。这会强制调整top，这是不理想的。请参阅以下代码：

＆＃13;

body, html, main {
  height:100%;
}

.cd-fixed-bg {
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}
 
.cd-fixed-bg.cd-bg-1 {
  background:Red;
}
.cd-fixed-bg.cd-bg-2 {
  background:green;
}
.cd-fixed-bg.cd-bg-3 {
  background:blue;
}
.cd-fixed-bg.cd-bg-4 {
  background:yellow;
}

.cd-fixed-bg.cd-bg-5{
  background:orange;
}
 
.cd-scrolling-bg {
	min-height: 100%;
	background: black;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="normalize.css" rel="stylesheet">
  <link href="styleSO.css" rel="stylesheet">
  </head>
<body>
	<main>
	  <div class="cd-fixed-bg cd-bg-1">
      
  	</div> 
    <div class="cd-scrolling-bg cd-color-2" >
  	</div> 
  	<div class="cd-fixed-bg cd-bg-4">
  	  <h1></h1>
  	</div> 
  	<div class="cd-fixed-bg cd-bg-5">
  	  <h1></h1>
  	</div> 
  	<div class="cd-fixed-bg cd-bg-2">
  	  <h1></h1>
  	</div> 
  </main>
</body>
</html>

＆＃13;

如您所见，我被迫做top:-73px;之类的内容，因此div之间没有差距。我已经尝试了margin-top，但没有成功。

Answer 1

问题是margin collapse。

您的元素顶部有一些h1元素，默认情况下有一些边距。帽子边缘折叠，效果就像边缘被添加到div而不是h1。

为防止保证金崩溃，您可以使用

display: inline-block。

这可以防止保证金崩溃。
width: 100%。

默认情况下，内联块的宽度为shrink-to-fit。

width: 100%使它们覆盖所有包含块，就像块一样。
vertical-align: middle。

默认情况下，元素有vertical-align: baseline，这将add some whitespace below内联块。

将vertical-align设置为其他值，例如top，middle或bottom可修复此问题。

.cd-fixed-bg {
  display: inline-block;
  width: 100%;
  vertical-align: middle;
}

body, html, main {
  height:100%;
}
.cd-fixed-bg {
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  min-height: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
}
.cd-fixed-bg.cd-bg-1 {
  background:Red;
}
.cd-fixed-bg.cd-bg-2 {
  background:green;
}
.cd-fixed-bg.cd-bg-3 {
  background:blue;
}
.cd-fixed-bg.cd-bg-4 {
  background:yellow;
}
.cd-fixed-bg.cd-bg-5{
  background:orange;
}
.cd-scrolling-bg {
  min-height: 100%;
  background: black;
}

<main>
  <div class="cd-fixed-bg cd-bg-1">
  </div> 
  <div class="cd-scrolling-bg cd-color-2" >
  </div> 
  <div class="cd-fixed-bg cd-bg-4">
    <h1></h1>
  </div> 
  <div class="cd-fixed-bg cd-bg-5">
    <h1></h1>
  </div> 
  <div class="cd-fixed-bg cd-bg-2">
    <h1></h1>
  </div> 
</main>

Answer 2

这个问题绝对是不一个空白问题，这是一个边际问题。之所以发生这种情况，是因为h1边距突出了div的顶部。要解决此问题，一种解决方案是将overflow: auto应用于您的div。

现场演示：

＆＃13;

body, html, main {
  height:100%;
}

.cd-fixed-bg {
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	overflow: auto;
}
 
.cd-fixed-bg.cd-bg-1 {
  background:Red;
}
.cd-fixed-bg.cd-bg-2 {
  background:green;
}
.cd-fixed-bg.cd-bg-3 {
  background:blue;
}
.cd-fixed-bg.cd-bg-4 {
  background:yellow;
}

.cd-fixed-bg.cd-bg-5{
  background:orange;
}
 
.cd-scrolling-bg {
	min-height: 100%;
	background: black;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="normalize.css" rel="stylesheet">
  <link href="styleSO.css" rel="stylesheet">
  </head>
<body>
	<main>
	  <div class="cd-fixed-bg cd-bg-1">
      
  	</div> 
    <div class="cd-scrolling-bg cd-color-2" >
  	</div> 
  	<div class="cd-fixed-bg cd-bg-4">
  	  <h1></h1>
  	</div> 
  	<div class="cd-fixed-bg cd-bg-5">
  	  <h1></h1>
  	</div> 
  	<div class="cd-fixed-bg cd-bg-2">
  	  <h1></h1>
  	</div> 
  </main>
</body>
</html>

＆＃13;

Answer 3

在div的父级中将font-size设置为0，空白现在的高度为零。显然，您需要将字体大小重置为div的所需数字...

body, html, main {
  height:100%;
  font-size: 0;
}

Answer 4

可能就是这样

main div {
  height: 100vh;
  width: 100vw; /*optional*/
  overflow: hidden;/*optional*/
}

main div:nth-child(1) {
  background: red;
}

main div:nth-child(2) {
  background: black;
}

main div:nth-child(3) {
  background: yellow;
}

main div:nth-child(4) {
  background: orange;
}

main div:nth-child(5) {
  background: green;
}

h1 {
  margin: 0;
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="normalize.css" rel="stylesheet">
  <link href="styleSO.css" rel="stylesheet">
  </head>
<body>
	<main>
	  <div></div> 
      <div></div> 
  	  <div>
  	    <h1>#H1</h1>
  	  </div> 
  	  <div>
  	    <h1>#H1</h1>
  	  </div> 
  	  <div>
  	    <h1>#H1</h1>
  	  </div> 
    </main>
</body>
</html>

为什么div之间有空格？

4 个答案: