如何垂直排列两个div，它们之间有空格？

Question

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

TOP和BOTTOM应该居中，我希望它们之间有一个任意的空格。我在SO中看到很多答案建议使用margin: 0 auto;。但是那个（AFAIK）阻止我在这两个div之间设置一个空格。

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>

基本上，我创建的间隔物可以添加到我需要空间的任何地方。 我通常添加多个，具有不同的维度

顺便说一下，你需要关闭div，在你上面粘贴的代码中你不是

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>