padding右边距失效问题，出现滚动条时，右边并没有出现留白

需求：如下图。一个父容器，里面有一个子容器，想实现子容器和父容器之间保留20px距离。

错误方法一：自然情况下，我们会给父容器加一个padding:20px; 但是并不能实现需求，右边并不出现空白

      .father {
        height: 200px;
        width: 200px;
        border: 1px solid #000;
        overflow: auto;
        padding: 20px;
      }
      .son {
        border: 1px solid #000;
        height: 100px;
        width: 300px;
        background: red;
      }

正确方法一：在子容器外面再套一层

<div class="father">
  <div style="width: 300px; padding: 20px;">
    <div class="son"></div>
  </div>
</div>

正确方法二：把子元素设置为display：inline-block

      .father {
        height: 200px;
        width: 200px;
        border: 1px solid #000;
        overflow: auto;
        padding: 20px;
      }
      .son {
        border: 1px solid #000;
        height: 100px;
        width: 300px;
        background: red;
        display: inline-block;
      }