关于子元素margin-top使得父元素下移的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.main {
height: 640px;
background: #AAA;
background-size: cover;
}
.main__study {
width: 200px;
height: 200px;
background: #823;
margin-top: 200px;
}
</style>
</head>
<body>
<section class="main">
<div class="main__study"></div>
</section>
</body>
</html>如代码所示，一个父元素，一个子元素，我想让子元素的上外边距为200px，但是显示的效果却是父元素的上外边距为200px，相当于整个父元素向下平移了，这是什么问题？
33
收起
正在回答
3回答
你好，这是一个css hack 问题 ，外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，解决方案：
1、为父元素增加padding-top样式
2、为父元素添加overflow：hidden；
3、为父元素或者子元素声明浮动
4、为父元素添加border（border:1px solid transparent）
5、为父元素或者子元素声明绝对定位
希望对你有帮助，祝学习愉快。
HTML5与CSS3实现动态网页 2018
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星