css 田字布局，子元素之间，子元素和父元素之间间距10，自适应

前几天去猿辅导面试的css面试题，当时太紧张了，就想着怎么按百分比或者是位移搞，但是冷静下来，css复杂的定位就给元素包爸爸，几乎能解决一大票问题。
细致的描述问题：
一个父元素里面有四个子元素，按田字排列，子元素之间间距10px,和父元素之间的间距也是10px，父元素缩放时子元素要自适应。
解决思路就是父元素里面再包一层，来解决父元素和子元素间距10 的问题。
四个子元素分别再包一层b,b就负责宽高占父元素的50%，里面的b-inner，负责子元素之间的间距。用position absolute相对b进行定位，搞出间距，注意平分公共间距一个子元素应该位移的是5px。

<div class="a">
  <div class="a-inner">

    <div class="b">
      <div class="b-inner b-inner-1">

      </div>
    </div>
    <div class="b">
      <div class="b-inner b-inner-2">

      </div>
    </div>
    <div class="b">
      <div class="b-inner b-inner-3">

      </div>
    </div>
    <div class="b">
      <div class="b-inner b-inner-4">

      </div>
    </div>
  </div>
</div>

.a {
  width: 200px;
  height: 200px;
  background: #20c0cc;
  padding: 10px;
}

.a-inner {
  width: 100%;
  height: 100%;
  background: #cb123b;
}

.b {
  float: left;
  width: 50%;
  height: 50%;
  background: pink;
  overflow: hidden;
  position: relative;
}

.b-inner {
  position: absolute;
  height: 100%;
  width: 100%;
  background: green;
}

.b-inner-1 {
  bottom: 5px;
  right: 5px;
}

.b-inner-2 {
  bottom: 5px;
  left: 5px;
}

.b-inner-3 {
  top: 5px;
  right: 5px;
}

.b-inner-4 {
  top: 5px;
  left: 5px;
}