<title>外边距重叠问题</title>
<style>
/* 方法4 */
.clearfix::before {
content: "";
display: table;
}
.wrap {
width: 300px;
height: 300px;
background-color: pink;
/* 方法一：设置边框
border: 10px solid red; */
/* 方法二：设置内边距 */
/* padding-top: 50px;
box-sizing: border-box; */
/* overflow: hidden; */
/* float: left; */
}
.content {
width: 100px;
height: 100px;
background-color: greenyellow;
margin-top: 50px;
/* display: inline-block; */
}
/* 伪元素选择器 */
/* .wrap::before {
display: table;
content: "";
} */
.wrap1 {
width: 200px;
height: 200px;
background-color: maroon;
}
.wrap1>div {
width: 100px;
height: 100px;
background-color: yellow;
margin: 50px 0 0 0;
}
</style>
</head>
<body>
<!--
content离wrap上边边框距离为50px
父子元素外边距重叠问题：
产生原因：垂直方向，父子元素的外边距重叠，所以给子元素设置的外边距会传递给父元素
解决：父子外边距开始位置不重叠
父元素
方案1：设置边框
方案2：设置内边距
1,2出现将父元素扩大，添加属性box-sizing：border-box
方案3：设置overflow的值非visible，常用的hidden
方案4: 给父元素通过::before添加一个table子元素，必须要写content属性 推荐使用
-->
1730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
