CSS边框塌陷

嵌套元素margin问题（边框塌陷）

1.子元素设置margin-top，这时父元素内并不包含子元素margin-top的高度

（margin-bottom是一样的现象）

<template>
  <div class="index">
    <div class="container">
      <div class="a"></div>
    </div>
  </div>
</template>


<style lang="less" scoped>
.container {
  background-color: pink;
}
.a {
  margin-top: 20px;
  height: 50px;
  background-color: yellowgreen;
  border:solid 2px red;
}
</style>

 如果想让父元素包含子元素的margin-top，有以下几种解决方法

1. 父元素设置padding-top
2.  父元素设置overflow: hidden
3. 父元素设置边框