内元素加margin会顶下外元素的4种解决办法
<body style="margin: 0;">
<div class="div-outer">
<div class="div-inner"></div>
</div>
</body>
*********************
>>> style.css
.div-outer {
width: 300px;
height: 400px;
background-color: lightblue;
/* border-top: 1px; */ 第一种
/* padding-top: 1px; */ 第二种
/* overflow: hidden; */ 第三种
}
.div-outer::before { 第四种,注意是外元素
content: "";
display: table;
}
.div-inner {
width: 100px;
height: 100px;
background-color: darkred;
margin: 20px;
}