Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

第74题:什么是外边距重叠(collapsing margins)/ margin坍塌? #75

Open
zxdfe opened this issue Nov 7, 2022 · 2 comments
Labels

Comments

@zxdfe
Copy link
Owner

zxdfe commented Nov 7, 2022

  • 相邻的两个或多个普通流中的块元素,如果它们设置了外边距,那么在垂直方向上,外边距会发生重叠,以绝对值大的那个为最终结果显示在页面上,即最终的外边距等于发生层叠的外边距中绝对值较大者

  • 防止外边距重叠:创建BFC

  • 行内元素、浮动元素、绝对定位元素之间的外边距都不会叠加

@zxdfe zxdfe added the css label Nov 7, 2022
@Lsunlight
Copy link

外边距重叠指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界,边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。
外边距重叠的好处:当我们上下排列一系列规则的块级元素时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离,这样各处距离就一致了。就像p段落中,如果p段落中有多行,那么外边距重叠就能避免产生双倍行距。
如何清除外边距重叠:给一个元素设置display: inline-block就可以,

@2734209032
Copy link

外边距重叠只在上下边距存在,左右不存在,两个在正常流中相邻(兄弟或父子关系)的块级元素的外边距会组合在一起成单边距,如果2个边距都是正数,取最大的那个,2个都是负数,取绝对值大的那个,一正一负取2个的和

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants