首页 > 代码库 > margin折叠

margin折叠

2024-08-12 16:43:02   220人阅读

  • 什么是margin折叠：当两个或更多个垂直边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。
    • 注意：
                          (1)  只有普通文档流中块框的垂直外边距才会发生外边距叠加
                          (2)  行内框、浮动框或绝对定位框之间的外边距不会叠加
                          (3)  折叠后取其中最大的那个margin值作为最终值
  • 垂直外边距叠加有三种情况：
               (1)  元素自身叠加  ：当元素没有内容(即空元素)、内边距、边框时，它的上下边距就相遇了，即会产生叠加(垂直方向)。当为元素添加内容、内边                                                距、边框任何一项，就会取消叠加。
               (2)  相邻元素叠加 ： 相邻的两个元素如果它们的上下边距相遇，即会产生叠加
               (3)  包含(父子) 元素叠加     包含元素的外边距 隔着父元素的内边距和边框，当这两项都不存在的时候，父子元素垂直外边距相邻，产生叠加。添加                                            任何一项都会取消叠加
//两个p标签的上下间距为100px , 而不是200px , 发生了折叠 <!DOCTYPE html><html><head>  <meta charset="utf-8"><title></title><style type="text/css">p{margin:100px;}</style></head><body>  <p>这是第一段</p>  <p>这是第二段</p></body></html>
  • 需要注意的一点是： 在水平书写模式下发生margin 折叠的是垂直方向( 即margin-top/margin-bottom).而在垂直书写模式下，margin折叠发生在水平方向上( 即margin-left/margin-right)
如何避免margin折叠
  • 首先总结一下margin折叠的条件：
    • margin折叠只发生在块元素上
    • 浮动元素不与其他元素margin折叠
    • 定义了overflow属性且值不为visible的块元素，不与它的子元素发生margin折叠
    • 绝对定位元素的margin不与其他任何margin折叠
    • 如果常规流中的第一个块元素没有border-top、padding-top , 且其第一个浮动的块级子元素没有间隙，则该元素的上外边距会与其常规流中的第一个块级子元素的上外边距折叠
  • 取消margin折叠：
    • 将元素改为非块级元素
    • 浮动
    • 定位
    • 设置属性 overflow:hidden 等方法

 

参考文章：　

  • http://www.w3.org/TR/css3-box/#collapsing-margins
  • http://dev.w3.org/csswg/css-box/#collapsing-margins

margin折叠


联系
我们