使用margin遇到的坑
1、比如两个同级盒子分别设置margin-top:20px，margin-bottom:30px;理想状态下两个盒子之间的间距30+20=50px，结果两个盒子之间的间距只有30px.
<style>
/* 上下外边距叠加的时候，以值大的为准 */
.box1 {
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 30px;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
margin-top: 20px;
}
</style>
<body>
<div class="box1">
盒子一
</div>
<div class="box2">
盒子二
</div>
</body>
2、第一个子盒子的上外边距会传递给父盒子
<style>
.box1 {
width: 200px;
height: 170px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
解决办法：
1、给父盒子设置上内边距
2、给父盒子设边框或浮动
9226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
