盒子模型
margin 外边距
padding 内边距
盒子布局的稳定性:
优先使用width>padding>margin
1、上下盒子的margin塌陷
上下盒子发生margin塌陷 margin小的盒子塌陷在大的盒子,不是简单叠加。浮动后,左右margin也不会发生塌陷,如想测试,把注释代码取消注释即可。
塌陷效果图:
.box1{
/*float: left;*/
width: 200px;
height: 200px;
background: yellowgreen;
/*margin: 60px 50px;*/
margin-bottom: 100px;
/*margin-right: 50px;*/
}
.box2{
/* float: left;*/
width: 200px;
height: 200px;
background: skyblue;
/* margin-left: -50px; */
margin: 150px;
}
2、父子盒子的margin塌陷
父子盒子发生margin塌陷 margin小的盒子塌陷在大的盒子。如下例:父盒子margin-top:100px,儿子margin-top:60px,margin塌陷,只有100px
塌陷效果图:
.box1{ /*父盒子*/
/*float: left;*/
width: 200px;
height: 140px;
/* padding-top: 60px; */
background: yellowgreen;
/*border: 1px solid red;*/
margin-top: 100px;
}
.box2{
/*float: left;*/
width: 100px;
height: 100px;
background: skyblue;
margin-top: 60px;
}
原文地址:https://www.cnblogs.com/growingrick/p/12141631.html
时间: 2024-10-30 01:08:12