/*同级塌陷*/
.box{
width:100px;
height:100px;
background-color:lightblue;
margin-bottom: 40px;
}
.box1{
width:100px;
height:100px;
background-color:lightcoral;
margin-top:40px;
}点击 "运行实例" 按钮查看在线实例
/*嵌套传递,*/
.box{
width:300px;
height:300px;
background-color:lightblue;
}
.box1{
width:100px;
height:100px;
background-color:lightcoral;
}
.box{
padding-top:100px;
height: 200px;
}点击 "运行实例" 按钮查看在线实例
体会:margin和padding在两个盒子中使用区别,margin用于两个并列的盒子间的调节,padding用于嵌套在一起的盒子间的调节
/*自动挤压*/
.box{
width:100px;
height:100px;
background-color:lightblue;
margin-left:100px;
margin-left:-50px;
/* margin-left: auto;
margin-right:auto; */
margin:0 auto;
}点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号