关于子元素margin-top使得父元素下移的问题

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!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，相当于整个父元素向下平移了，这是什么问题？

风硕依源 2017-04-14

源自：H5+CSS3+JS实现炫酷网页 5-6 作业题

33

收起

3回答

小于飞飞回答被采纳获得+3积分 2017-04-15 16:01:58

你好，这是一个css hack 问题，外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，解决方案：

1、为父元素增加padding-top样式
2、为父元素添加overflow：hidden；
3、为父元素或者子元素声明浮动
4、为父元素添加border（border:1px solid transparent）
5、为父元素或者子元素声明绝对定位

希望对你有帮助，祝学习愉快。

风硕依源提问者 #1

非常感谢！

2017-04-15 17:26:27

残扬x0 2017-04-15 15:47:26

<section class="main">

<div>123</div>

<div class="main__study"></div>

</section>

这样子就不会了

残扬x0 2017-04-15 15:39:41

<section class="main">

<div class="main__study"></div>

</section>

因为你这里有只有div一个子元素，所以会出现这个情况

提问者风硕依源 #1

我尝试了，再添加一个子元素也会出现这种情况你说的”只有一个子元素会出现这种情况”的意思是什么？

2017-04-15 15:41:19
小于飞飞回复提问者风硕依源 #2

css hack 问题，参考上面的回答，动手实践下。

2017-04-15 16:03:19

相似问题

margin-top:50%,子元素为什么不相对父元素下移？

父元素

子盒子设置上外边距，父盒子也会移动，与子元素的生成框的类型有关

子元素加外边距为撑大父元素吗

这里为什么是padding-top，不是margin-top？

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018

参与学习 1887 人
提交作业 4643 份
解答问题 5760 个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

本课精华内容

问答作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号