<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边距重叠2</title>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 200px;
height: 200px;
background-color: green;
/*margin-top: 50px;*/
/*border: 1px solid green;*/
/*padding: 10px;*/
/*display: inline-block;*/
/*overflow: hidden;*/
/*float: left;*/
/*position: absolute;*/
}
.son {
width: 100px;
height: 100px;
background-color: blue;
/*margin: 0 auto;*/
/*margin-bottom: 49px;*/
margin-top: 50px; /* 40px就居中了 (父高180-子高100)=剩余80px的空间, 除以2居中 */
/*text-align: center;*/
/*display: inline-block;*/
/*float: left;*/
position: absolute
}
/*
2.没有内容将父元素和后代元素分开
当一个块元素上边距 margin-top 直接贴合到元素下边距margin-bottom时也会发生边距折叠
解决:
-1.给父元素添加边框: border;
注意: 多出来的边框是否是有需要的
-2.给父元素添加padding;
注意: 父元素实际的大小;
-3 给父级或子级添加 display: inline-block;
因为只有块级元素会产生边距重叠, 那么考虑将块元素变成非块级元素，也就是设置为行内块级元素
注意: 给子元素设置为行内块元素时，是否使用了margin;
4.给父元素添加 overflow: hidden;
注意:子元素的高度 加上 外边距 < 父元素高度, 如果超出，子元素的部分内容会被隐藏掉;
5.给父级或者子级设置 浮动 float
6.给父级或者自己设置 定位 position: absolute;
*/
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>上述运行结果：
2037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
