首页 > Web开发 > 详细

CSS外边距合并(折叠)问题。

时间:2018-06-23 16:07:58      阅读:184      评论:0      收藏:0      [点我收藏+]

CSS外边距合并

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

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

相邻元素之间
毗邻的两个元素之间的外边距会折叠(除非后一个元素需要清除之前的浮动)。
父元素与其第一个或最后一个子元素之间
如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容,也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开;或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、heightmin-heightmax-height将两者的 margin-bottom 分开,那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。
空的块级元素
如果一个块级元素中不包含任何内容,并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、heightmin-height 将两者分开,则该元素的上下外边距会折叠。

一些需要注意的地方:

  • 上述情况的组合会产生更复杂的外边距折叠。
  • 即使某一外边距为0,这些规则仍然适用。因此就算父元素的外边距是0,第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
  • 如果参与折叠的外边距中包含负值,折叠后的外边距的值为最大的正边距与最小的负边距(即绝对值最大的负边距)的和。
  • 如果所有参与折叠的外边距都为负,折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。

示例

HTML:

1 <p>The bottom margin of this paragraph is collapsed …</p>
2 <p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
3 
4 <div>This parent element contains two paragraphs!
5   <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
6   <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
7 </div>
8 
9 <p>I am <code>2rem</code> below the element above.</p>

CSS:

1 div {
2   margin: 2rem 0;
3   background: lavender;
4 }
5 
6 p {
7   margin: .4rem 0 1.2rem 0;
8   background: yellow;
9 }

结果:

技术分享图片

 

CSS外边距合并(折叠)问题。

原文:https://www.cnblogs.com/lithree/p/9217303.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!