关于子元素设置了margin-top，父元素也跟随下移问题，希望麻烦帮忙解答下！
来源：3-23 margin外边距属性
慕沐4133343
2020-03-10 00:22:08
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.div1{
width:500px;
height:500px;
background: blue;
}
.div2{
width:100px;
height:100px;
background: red;
margin-top:50px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">margin属性</div>
</div>
</body>
</html>
写回答
1回答
-
同学你好，子元素设置margin-top，会导致父级也下移。
这是一个css hack 问题 ，外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，解决方案：
（1）为父元素增加padding-top样式
（2）为父元素添加overflow:hidden;
（3）为父元素或者子元素声明浮动
（4）为父元素添加border（border:1px solid transparent）
（5）为父元素声明绝对定位如果我的回答帮助了你，欢迎采纳，祝学习愉快！
1
相似问题