一、垂直外边距重叠
<style>
.patient{
width:100px;
height:100px;
background-color:pink;
}
.children{
width:50px;
height:50px;
background-color:green;
margin-top:30px
}
</style>
</head>
<body>
<div class="patient">
<div class="children"></div>
</div>
解决方案：加overflow属性；
<style>
.patient{
width:100px;
height:100px;
background-color:pink;
overflow:hidden;
}
.children{
width:50px;
height:50px;
background-color:green;
margin-top:30px
}
</style>
</head>
<body>
<div class="patient">
<div class="children"></div>
</div>
如果想用在父类里写padding解决会发现新的问题：padding占用空间
<style>
.patient{
width:100px;
height:100px;
background-color:pink;
padding:30px;
}
.children{
width:50px;
height:50px;
background-color:green;
}
</style>
</head>
<body>
<div class="patient">
<div class="children"></div>
</div>
解决方案： 在父类里写入 box-sizing:border-box;即可解决；
