原因在于：CSS 外边距合并
复现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
html * {
margin:0;
padding: 0;
}
</style>
<body>
<section style = "background:orange;">
<article style =‘height:100px;margin-top:40px;background:red‘></article>
</section>
</body>
</html>
这里子元素设置margin-top会作用在父元素上了。
解决方法：
1、为父元素设置padding。
2、为父元素设置border。
2、为父元素设置 overflow: hidden 。
原文地址：https://www.cnblogs.com/aiyr/p/9962748.html
时间： 2024-11-07 12:44:49