<style type="text/css">
/*
内边距：
同时定义四个内边距：顺序为上右下左（顺时针）
padding：10px 20px 30px 40px;
外边距：
同时定义四个外边距：顺序为上右下左（顺时针）
margin 20px 30px 40px;
*/
/*
外边距合并原则：（发生于两个相邻元素之间）
在垂直方向上当相邻两个元素之间定义了外边距
（如：box1的下边距和box2的上边距），则会合并；
最终取值为外边距较大者（即两元素的距离变为50px）
*/
.box1{
width: 600px;
height: 200px;
margin: 0 0 50px 0;
background-color: red;
}
.box2{
width: 600px;
height: 100px;
margin: 10px 0 0 0;
background-color: yellow;
}
/*
外边距塌陷：（发生于两个嵌套元素之间）
在垂直方向上的子元素设定了外边距时，会连带父元素一齐起作用，（如：子元素的margin-top外边距为20px；则父子元素会一齐往下走50px）
解法：
1.（不推荐）
给父元素设置边框border: 1px solid #232323;
（注意：设定了边框后父盒子的大小会随之改变）
2.（推荐）
给父元素设定属性：overflow:hidden;
*/
.father{
/*
在border: 1px solid #232323;时，
width: 498px;
height: 398px;
以防止盒子总大小发生改变
*/
width: 500px;
height: 400px;
/*margin: 0 0 50px 0;*/
background-color: #232323;
/*border: 1px solid #232323;*/
overflow: hidden;
}
.son{
width: 200px;
height: 200px;
/*margin: 10px 0 0 0;*/
background-color: #eee;
margin-top: 50px;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<hr />
<div class="father">
<div class="son">
</div>
</div>
</body>
5346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
