为什么会高度塌陷

这里是为什么呢？

收起

2回答

好帮手慕夭夭 2018-09-16 10:12:18

经过测试，并没有高度塌陷的问题。同学想说的是，子元素设置margin之后，为什么没有效果？这是因为父元素如果没有设置上边框或者上填充，子元素设置上边距之后，父元素就会一起跑下来。所以看起来没有效果，如下为父元素设置边框（设置padding也可以）：

希望解答了你的疑惑，祝学习愉快，望采纳

提问者慕斯卡6097176 #1

请问老师，这个现象和BFC有关吗？同一个BFC中垂直外边距叠加，这里就是子元素的margin-top和父元素的margin-top，叠加了，所以只显示出了父元素盒子的margin，子元素的margin就显示不出来了，是这个原因吗？

2018-09-16 22:58:11
好帮手慕夭夭回复提问者慕斯卡6097176 #2

可以这样理解哦

2018-09-17 10:14:44

好帮手慕夭夭 2018-09-12 10:07:21

请上传一下完整的代码 , 以便进行测试( 不要截图) , 祝学习愉快 !

提问者慕斯卡6097176 #1

<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> .box{ position:relative; width:100px; height:100px; background:#ccc; margin:20px; } .item{ position:relative; width:50px; height:50px; background:red; margin:20px; } </style> </head> <body> <div class='box' id='demo'> <div class='item'></div> </div> </body> </html> 为什么里面的div设置的margin不起作用，反而会向上移动？

2018-09-15 15:43:13