原创声明：本文所有图片和代码皆由本人制作和编写。
问题阐述
html代码：
<div class="father1">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="father2"></div>
css代码：
<style>
.father1{
width: 300px;
background-color: cadetblue;
}
.son1{
width: 100px;
height: 100px;
background-color: rgb(64, 125, 217);
}
.son2{
width: 100px;
height: 100px;
background-color: rgb(63, 58, 173);
}
.father2{
height: 20px;
background-color: rgb(162, 244, 247);
}
</style>
效果如下：
现今想要调整子元素的位置，为第一个子元素加上margin-top: 100px;为第二个子元素加上margin-bottom: 100px;
理想效果：
然而，实际效果却是子元素外边距溢出，影响了父元素外边距：
解决办法
法一：为父元素设置透明边框
css代码：
.father1{
width: 300px;
background-color: cadetblue;
border: 1px solid transparent;
}
法二：为父元素设置内边距
css代码：
.father1{
width: 300px;
background-color: cadetblue;
padding: 1px;
}
法三：为父元素设置overflow属性
css代码：
.father1{
width: 300px;
background-color: cadetblue;
overflow: hidden;
}
后记
感谢你看到这里。