logo标签列表

为什么在div之间需要留白？

htmlcss
3

根据这篇文章，实现简单的视差效果。我不明白为什么在div之间会有一个空白间隔。这强制使用top进行调整，这并不理想。请参考下面的代码：

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;
}
<!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>

正如您所看到的，我被迫执行类似于 top:-73px; 这样的操作，以便在 div 之间没有间隙。我尝试过使用 margin-top，但并不成功。

2
你能提供一个最简化的例子吗？你的问题中有很多代码。http://stackoverflow.com/help/mcve - Michas
你是在说"KYIV EVENTS"的顶部空间吗？ - Atif Tariq
这里有一个简洁的解决方案 - https://dev59.com/mWMl5IYBdhLWcg3wTljY - Techidiot
大家好，之前的代码有点太复杂和混乱了，非常抱歉。我已经添加了一个简化版本。谢谢！ - Pere
4个回答
4

这个问题绝对不是一个空格问题，它是一个边距问题。发生这种情况是因为h1的边距超出了

元素的顶部。解决方法之一是在
元素上应用overflow: auto。

演示实例：

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;
}
<!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>

3
问题出在margin collapse上。
你的元素顶部有一些默认带有一些边距的

元素。这种边距会发生折叠，导致效果就像是边距被添加到
而不是

上。
为了防止边距折叠，可以使用以下方法：
  1. display: inline-block。

    这可以防止边距折叠。

  2. width: 100%。

    默认情况下，内联块具有收缩至适合宽度。

    width: 100%使它们覆盖整个包含块，就像块一样。

  3. vertical-align: middle。

    默认情况下，元素具有vertical-align: baseline，这会在内联块下方添加一些空白。

    将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>

谢谢，@Oriol！确实，<h1>标签搞乱了边距。我尝试了你的建议，使用display: inline-block，但结果发现这会影响背景图片的显示（我不使用纯色背景）。看起来上面提到的overflow: auto修复了问题，而且不会影响背景图片的显示。 - Pere
2
@perettxintxola 是的，两种方式都可以工作，因为它们创建了块格式化上下文根，但每种方式都有自己的问题。请参考这个答案以获取创建BFC根的完整列表。 - Oriol
0

可能是这样的

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>

0
将父元素的字体大小设置为0，这样空白区域就会变成零高度。显然，你需要将字体大小重新设置为适当的数值，以供子元素使用...
body, html, main {
  height:100%;
  font-size: 0;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接