小程序ScrollView子Block边距不生效

块级元素的上下边距和左右边距有时会合并(或折叠)为一个外边距,其大小取其中的最大者,这种行为称为外边距折叠(margin collapsing),有时也翻译为外边距合并。注意浮动元素和绝对定位的元素的外边距不会折叠。

下面列出了会发生外边距折叠的三种基本情况:

相邻元素之间

毗邻的两个元素之间的外边距会折叠(除非后一个元素需要清除之前元素的浮动)。

父元素与其第一个或最后一个子元素之间

如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容,也没有创建块格式化上下文、或者清除浮动将两者的margin-top分开;或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的margin-bottom分开,那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。

空的块级元素

如果一个块级元素中不包含任何内容,并且在其margin-top与margin-bottom之间没有边框、内边距、行内内容、height、min-height将两者分开,则该元素的上下外边距会折叠。

一些需要注意的地方:

上述情况的组合会产生更复杂的外边距折叠。

即使某一外边距为0,这些规则仍然适用。因此就算父元素的外边距是0,第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。

如果参与折叠的外边距中包含负值,折叠后的外边距的值为最大的正边距与最小的负边距(即绝对值最大的负边距)的和。

如果所有参与折叠的外边距都为负,折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。

你可能感兴趣的:(小程序ScrollView子Block边距不生效)