css布局如何垂直平分布局？（不使用flex）

Question

<div class="out">
   <div class="inner"></div>
   <div class="inner"></div>
   <div class="inner"></div>
</div>

.out{
 width:100%;
 height:100%;
}
.inner{
 height:32%
}
本来想着 使用
.inner-nth-child(2){
  margin:2% 0;
}
但发现margin值是根据宽度来算百分比，所以按照上述布局没办法正好平分out-div

因此如何实现三个"inner"div垂直平分"out"div? 要求：
1）inner-div之间有margin值（有距离）。
2）不能使用flex布局

Answer 1

用定位

<div class="out">
  <div class="inner"></div>
  <div class="inner two"></div>
  <div class="inner three"></div>
</div>

.out{
  width:300px;
  height:900px;
  border: 1px solid #000;
  position: relative;
}
.inner{
  width: 100%;
  height:32%;
  background: #000;
}
.three {
  position: absolute;
  bottom: 0;
}
.two {
  position: absolute;
  bottom: 34%;
}

Answer 2

可以用paddding模拟margin,即

<div class="out">
    <div class="inner">
        <div class="container">内容展示</div>
    </div>
</div>

.inner {
    height: 32%;
    padding-top: 20px; 
}

.container {
    width: 100%;
    height: 100%;
}

Answer 3

我觉得既然只是因为margin:2% 0;不行的话，
可以换个角度去实现这2%的间距，
例如在第二个inner的上下各插入一个height为2%的透明div