html – Fragen Sie nach margin-top
高洛峰
高洛峰 2017-05-19 10:47:56
0
3
1897
<p >
    <h1 style="margin-top:100px">aa</h1>
</p>

Ich habe eine Frage, die ich nicht verstehe.
In 1.html umschließt p ein h1 und h1 hat einen Rand oben von h1, anstatt Ränder innerhalb von p zu implementieren. 2. So implementieren Sie es. Vielen Dank in S.

Code-Demo

Linkbeschreibung

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

Antworte allen(3)
小葫芦

这问题问了好多遍了,给你个参考吧
MDN-外边距塌陷
外边距折叠( Collapsing margins )

PHPzhong

根据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设置内边距或者边框

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage