如何在 div 标签之间创建垂直空间？答案

【问题标题】：How to make vertical space between div tags?如何在 div 标签之间创建垂直空间？
【发布时间】：2014-10-08 02:10:44
【问题描述】：

我有三个 div 标签，我想在 div 标签之间垂直留出空间，还希望我的第一个 div 标签是固定的。

当我将我的第一个 div 位置设置为不是固定的时，我可以制作垂直空间。

<html>
<head>
<title>div</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top: 2em; margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>        
</div>
</body>
</html>

当我将我的 "div a" 位置更改为 fixed 时，"div a" 和 "div b" 都从上边距：2em。

<html>
<head>
<title>div</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue; position: fixed;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top: 2em; margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>        
</div>
</body>
</html>

请帮助我将我的 "div a" 设为 fixed 并在 "div a 和 b" 之间留出空格 .

【问题讨论】：

标签： html css css-position

【解决方案1】：

为了将div.a（固定的）保持在页面顶部，请添加top: 0;，如果您希望它保持在其余内容的顶部，请添加z-index: 2;。

为了在div.a 和div.b 之间添加间距，您必须在div.b 周围放置一个容器div 并对其进行适当的填充。如果您只是在主容器 div 上放置填充，它将偏移div.a。

如果可能，将确定的高度设置为div.a，而不是百分比，因为这将使div.b 的垂直对齐和它的容器更容易。这样您就可以将div.b 的margin-top 设置为div.a 的height。

以下是为提高可读性而重构的 CSS 和 HTML：

/* CSS */
* {
  margin: 0;
  padding: 0;
}
div {
  width: 100%;
}
div.container {
  height: 100%;
}
div.container,
div.b-container {
  background-color: lime;
}
div.a {
  height: 70px;
  background-color: blue;
  position: fixed;
  top: 0;
  z-index: 2;
}
div.b-container {
  position: relative;
  padding-top: 2em;
  margin-top: 70px;
}
div.b-container div.b {
  width: 70%;
  height: 100%;
  background-color: gray;
  margin: auto;
  
  margin-bottom: 2em;
}
div.c {
  height: 5%;
  background-color: aqua;
}

<!-- HTML -->
<div class="container">
  <div class="a">
    a
  </div>
  <div class="b-container">
    <div class="b">b
    </div>
  </div>
  <div class="c">
    c
  </div>
</div>

【讨论】：

【解决方案2】：

将其他两个 div 也设为固定，保留 margin-top: 2em 参数

【讨论】：

感谢您的回复。我可以腾出空间，但我无法查看整页。我无法向下滚动...
用 padding-top 替换 margin-top，看看是否有帮助
感谢您的回复... :)
干净有效的一个

【解决方案3】：

当您将其设置为固定时，它会脱离正常的文档流程。这就是为什么其他元素在它下面迷路了。添加顶部：0； div a 并更改 div b 的 margin-top 对我有用。它至少是一个起点。我不确定您要寻找的最终结果是什么。查看链接

http://jsfiddle.net/8ar3kvep/

<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue; position: fixed; top:0;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top: 
4em; 
margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>        
</div>
</body>

【讨论】：