如何在它们之间垂直排列两个divs

Question

<div>
  <div>TOP</div>
  <div>BOTTOM</div>
</div>

顶部和底部应集中，我想在它们之间有一个任意的空间余地。我看到了许多答案，因此建议使用margin: 0 auto;。但是(afaik(阻止我在这两个部门之间设置空间。

Answer 1

.parent{
  display:block;
  width:100%;
  height:auto;
  background:pink;
}
.top, .bottom{
  width:400px;
  display:block;
  background:red;
  margin:0 auto;
  border:2px solid black;
}
.spacer{
  display:block;
  height:40px;
  width:100%;
  margin: 0 auto;
  content:"";
  
}

<div class="parent">
  <div class="top">TOP</div>
    <div class="spacer"></div>
  <div class="bottom">BOTTOM</div>
<div>

这通常是我的方式：

https://codepen.io/nickhg/pen/wdlpbx

<div class="parent">
  <div class="top">TOP</div>
    <div class="spacer"></div>
  <div class="bottom">BOTTOM</div>
<div>

基本上，我创建的垫片可以在需要一个空间的任何地方添加。我通常会添加多个，具有各种维度

，顺便说一句，您需要关闭Divs，在您粘贴的代码中，您不是

Answer 2

我会做

我要做的是...

1. 使用margin : 0 auto;将外部div
中心
2. 将margin-top添加到底部div或margin-bottom到顶部div。

---

示例

.outer {
   width : 50%;        /* the width of your outer block */
   margin : 0 auto;    /* to center the outer block */
   background : #f0f;  /* to demonstrate the width & height of the outer block */
}
.top, .bottom {
   background : #ff0;  /* to demonstrate the width & height of both inner blocks */
}
.bottom {
   margin-top : 10px;  /* to add a margin between top & bottom */
}

<div class="outer">
  <div class="top">TOP</div>
  <div class="bottom">BOTTOM</div>
<div>

---

替代

另外，您也可以...

1. 使用margin : 0 auto;将两个内部div S
集中
2. 将margin-top添加到底部的div或margin-bottom到顶部div。

示例

.outer {
   background : #f0f;  /* to demonstrate the width & height of the outer div*/
}
.top, .bottom {
   width : 50%;        /* the width of your inner blocks */
   margin : 0 auto;    /* to center the inner blocks */
   background : #ff0;  /* to demonstrate the width & height of inner blocks */
}
.bottom {
   margin-top : 10px;  /* to add a margin between top & bottom */
}

<div class="outer">
  <div class="top">TOP</div>
  <div class="bottom">BOTTOM</div>
<div>

Answer 3

这样吗？您可以将顶部边距添加到底部div。

.container {
  width: 300px;
  text-align: center;
  background-color: green;
}
.inner {
  display: inline-block;
}
.top, .bottom {
  width: 50px;
  height: 50px;
  background-color: red;
  border: thin solid black;
}

<div class="container">
<div class="inner">
  <div class="top"></div>
  <div class="bottom"></div>
</div>
</div>