<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属性 推荐使用
-->