Html 如何在div标签之间留出垂直空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26240714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make vertical space between div tags?
提问by Sivaprakash
I have three div tags and i want to make space between the div tags vertically and also want my first div tag as a fixed one.
我有三个 div 标签，我想在 div 标签之间垂直留出空间，还希望我的第一个 div 标签是固定的。
When i set my first div position as not a fixedone, i can able to make vertical space.
当我将第一个 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>
When i change my "div a"position as fixed, both "div a" and "div b"came down from the margin-top: 2em.
当我将“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>
Please help me to make my "div a"as fixedand to make spacebetween "div a and b".
请帮我做我的“分区一”为固定和使空间之间的“分区a和b”。
采纳答案by seantunwin
In order to keep div.a(the fixed one) to the top of the page, add top: 0;and if you want it to stay on top of the rest of the content, include z-index: 2;.
为了将div.a（固定的）保持在页面顶部，添加top: 0;，如果您希望它保持在其余内容的顶部，请包含z-index: 2;.
In order to add spacing between div.aand div.byou are going to have to put a container divaround div.band appropriate padding to it. If you just put padding on the main container div it will offset div.a.
为了增加div.a和之间的间距，div.b您将不得不在div周围放置一个容器div.b并对其进行适当的填充。如果您只是将 padding 放在主容器 div 上，它将偏移div.a。
If possible, set a definitive height to div.a, instead of a percentage, as this will make the vertical alignment of div.band it's container much easier. That way you can set the margin-topfor div.bto be the heightof div.a.
如果可能，将确定的高度设置为div.a，而不是百分比，因为这将使div.b和容器的垂直对齐更加容易。这样，你可以设置margin-top为div.b是height的div.a。
Below is the CSS and HTML refactored for better readability:
下面是为了更好的可读性而重构的 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>回答by Murtaza Zaidi
Make your other two divs as fixed too, keeping the margin-top: 2em parameter
使您的其他两个 div 也固定，保持 margin-top: 2em 参数
回答by Mikem
when you set it to fixed it takes it out of the normal document flow. thats why the other elemts are getting lost under it. add a top: 0; to div a and change the margin-top for div b worked for me. its atleast a starting point. im not sure what the end result your looking for. check out the link
当您将其设置为固定时，它会将其从正常的文档流中移除。这就是为什么其他元素在它下面迷路的原因。添加一个顶部：0; div a 并更改 div b 的边距顶部对我有用。它至少是一个起点。我不确定您要寻找的最终结果是什么。查看链接
<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>
