距开课0天0时0分-10752070秒
高洛峰2017-05-19 10:47:56 0 3 1052
[CSS3讨论组]举报回复话题 ↕
<p > <h1 style="margin-top:100px">aa</h1> </p>
有个问题不明白,1.html里面p包裹一个h1,h1有margin-top, 为什么h1的margin-top会撑破到p外面去,而不是在p里面实现外边距2.如何实现在p里面谢谢.
代码演示链接描述
3
0
分享
高洛峰 2017-05-19 10:49:563楼
这问题问了好多遍了，给你个参考吧MDN-外边距塌陷外边距折叠( Collapsing margins )
赞 +0添加回复
PHPzhong 2017-05-19 10:49:562楼
根据jasonintju的回答,我整理一下:因为我的子元素的margin-top比父元素大,所以会直接使用子元素的margin-top
块级父元素与其第一个/最后一个子元素如果块级父元素中，不存在上边框、上内补、inline content、 清除浮动 这四条属性（对于上边框和上内补，也可以说，当上边距及上内补宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距合并 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。类似的，若块级父元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有父元素的 border、padding、inline content、height、min-height、 max-height 分隔时，就会发生 下外边距合并 现象。
引用:https://developer.mozilla.org...
仅有的幸福 2017-05-19 10:49:561楼
给p和h1中间隔开就行了 p设置内边距或者边框
高洛峰 2017-05-19 10:49:563楼
这问题问了好多遍了，给你个参考吧
MDN-外边距塌陷
外边距折叠( Collapsing margins )
赞 +0添加回复
PHPzhong 2017-05-19 10:49:562楼
根据jasonintju的回答,我整理一下:
因为我的子元素的margin-top比父元素大,所以会直接使用子元素的margin-top
块级父元素与其第一个/最后一个子元素
如果块级父元素中，不存在上边框、上内补、inline content、 清除浮动 这四条属性（对于上边框和上内补，也可以说，当上边距及上内补宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距合并 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
类似的，若块级父元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有父元素的 border、padding、inline content、height、min-height、 max-height 分隔时，就会发生 下外边距合并 现象。
引用:https://developer.mozilla.org...
赞 +0添加回复
仅有的幸福 2017-05-19 10:49:561楼
给p和h1中间隔开就行了 p设置内边距或者边框
赞 +0添加回复