解决块级元素(inline-block)自带的边距

方法一 子元素使用float，可能会影响布局

代码(下面的css都是这段html代码)

<div class="exercise">
    <div></div>
    <div></div>
    <div></div>
  </div>

css

.exercise > div{
      float: left;
      width: 20px;
      height: 20px;
      background-color: pink;
      margin-right: 20px;
    }

方法二 给父盒子的font-size 设为0，每一个子元素都需要设字体大小

css

.exercise {
      font-size: 0;
    }
    .exercise > div{
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: pink;
      margin-right: 20px;
    }

方法三 边距比设计稿少5px，不够准确

.exercise {
      width: 100px;
      overflow: hidden;
      background-color: skyblue;
      white-space: nowrap;
    }
    .exercise > div{
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: pink;
      /* margin-right: 20px; */
      margin-right: 15px;
    }