项目开发中,想要要实现如下布局,但是我们发现直接设置子元素的margin-top属性,其会作用于父元素,垂直方向的margin值通常会叠加。
解决方案有以下三种:
- 给父元素设置 overflow:hidden
- 给父元素设置 border值,除none以外的值
- 考虑用padding来实现如上布局。
<div class="father">
<div class="son"></div>
</div>
.father {
box-sizing: border-box;
width: 300px;
height: 300px;
margin: 10px auto;
background: burlywood;
overflow: hidden;
/* border: 1px solid white; */
/* padding-top: 10px; */}
.son {
box-sizing: border-box;
width: 100px;
height: 100px;
background: cornflowerblue;
margin: 10px auto;