HuangHongRui / huanghongrui.github.io

:poultry_leg: MyBlog | Keep track of every moment.. :icecream:
http://blog.luckyman.xyz/
3 stars 1 forks source link

外边距合并 || 外边距塌陷 #2

Open HuangHongRui opened 6 years ago

HuangHongRui commented 6 years ago

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距。

出现的3种情况:

  1. 毗邻的两个兄弟元素之间的外边距会塌陷(除非后者兄弟姐妹需要清除过去的浮动

  2. 块级父元素与其第一个/最后一个子元素 【块级父元素中,不存在上边框、上内边距、内联元素、 清除浮动 这四条属性(也可以说,当上边框宽度及上内边距距离为0时),那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生上外边距合并现象,换句话说,此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。】

  3. 空块元素 如果一个空的块级元素,其 border、padding、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔,此时它的上下外边距将会合并。