当我把代码的p选择器换成div,为什么margin又重新塌陷了的?

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

div {

overflow: hidden;

}

p {

height: 20px;

width: 20px;

border: 4px solid green;

margin: 20px;

}

</style>

</head>

<body>

<div>

<p></p>

</div>

<div>

<p></p>

</div>

</body>

</html>

源自：浮动与定位 2-3 BFC规范和浏览器差异

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2020-11-11 09:51:06

同学你好，如果给div设置上margin塌陷是正常的，因为会取最大值，但是给div设置overflow:hidden;属性不能解决塌陷问题。

之前代码中是子元素p之间塌陷，给父盒子添加overflow属性。但现在是div自己塌陷，不能使用overflow解决了。可以添加浮动

这样两个div之间就会有40px间距

祝学习愉快！

好帮手慕星星 2020-11-10 19:19:39

同学你好，代码中给div元素加上了overflow:hidden;属性，形成了BFC，p的margin值不会取最大值，是相加的效果：

margin值并没有塌陷。

不知道同学测试出来是什么效果，建议再重新测试下哦。

祝学习愉快！

提问者慕斯3525401 #1

p { height: 20px; width: 20px; border: 4px solid green; margin: 20px; } 我意思是把这个p选择器改写成div,就塌陷了

2020-11-10 19:33:42
慕沐0341706 回复提问者慕斯3525401 #2

那你得给改写的选择器写上overflow属性才不塌陷啊，你这里面又没有

2020-11-16 18:04:35
慕沐0341706 #3

我说的不对，上面那个老师说的好，overflow解决它的子盒子的塌陷（隐藏有overflow盒子的超出边框的部分），要是给本身盒子加上overflow属性，这个盒子又和其他盒子有边距也塌陷，不塌陷的（隐藏的）是它的子盒子，兄弟盒子不能取消塌陷

2020-11-16 18:15:06