扫码关注官方订阅号
84669人学习
65727人学习
82984人学习
467778人学习
498837人学习
471966人学习
256484人学习
152542人学习
224170人学习
139536人学习
81804人学习
85022人学习
11944人学习
20001人学习
60816人学习
5487人学习
15007人学习
2150人学习
6980人学习
194925人学习
359900人学习
1142人学习
19058人学习
3206人学习
180550人学习
48569人学习
17603人学习
40936人学习
1049人学习
750人学习
32909人学习
<p > <h1 style="margin-top:100px">aa</h1> </p>
有个问题不明白,1.html里面p包裹一个h1,h1有margin-top, 为什么h1的margin-top会撑破到p外面去,而不是在p里面实现外边距2.如何实现在p里面谢谢.
代码演示链接描述
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
这问题问了好多遍了,给你个参考吧MDN-外边距塌陷外边距折叠( Collapsing margins )
根据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...
给p和h1中间隔开就行了 p设置内边距或者边框
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
精品班
技术支持
技术咨询
学习群
会员优惠
返回顶部
这问题问了好多遍了,给你个参考吧
MDN-外边距塌陷
外边距折叠( Collapsing margins )
根据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...
给p和h1中间隔开就行了 p设置内边距或者边框