css盒子塌陷问题

css父盒子设置了border还是出现塌陷问题

出现塌陷的原因：

一般都是因为子元素设置了margin-top，而父盒子整个也跟着子盒子的margin整体移动了，解决办法就是：
1：给父盒子加overflow：hideen 这种方式会让你的子盒子内容溢出的会隐藏
2：给父盒子加个border：设置颜色为transparent 这种方式是比较好用的，影响较小
3：给父盒子加内边距,有时候我们的需求是不给父盒子加内边距的，这种方式也不是很好用，视情况而定。

我遇到的情况：这几种方式都试了还是不行

具体代码

  <div class="default-pagination">
  // 问题就在这个引用，引用的el-select里面的input自带的有margin-top  导致出现外边距塌陷
   <el-select
      v-model="size"
      style="width: 60px; margin-left: 10px; margin-right: 10px"
      @change="handleSizeChange"
    >
      <el-option v-for="item in perPage" :key="item.label" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>

//父盒子设置
.default-pagination {
  position: relative;
  width: 100%;
  height: 30px;
  text-align: right;
  line-height: 30px;
  border: 1px solid transparent;
  color: #ffffff;
}
子盒子设置
::v-deep .el-input {
  width: 60px !important;
  margin-top: 0 !important;
}

注意如果无法修改element的内部样式，加上deep 我用的是scss预编译
问题出在我用了element的input组件，这个组件默认的有margin-top，导致我的盒子出现了塌陷，所以大家如果也引用了第三方组件，也需要注意一下这个问题，找了半天才找到，挺费时间的。记录一下，给大家提个醒。