css collapsing margins问题

概念

Collapsing margin，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，即外边距折叠。其中所说的 margin 毗邻，可以归结为以下两点：

这两个或多个外边距没有被非空内容、padding、border或clear分隔开。
这些margin都处于标准流(in-flow，非浮动元素，非定位元素)中。

计算

如果margin合并后该如何计算呢，遵循下面三个准则

如果相邻的两个或者多个元素的margin都为正值，那么合并后的margin值为其中的最大值
如果有正有负，取正值中最大的和负值中绝对值最大的两个margin值相加
如果都是负值，取绝对值最大的值

css collapsing margins问题相关推荐

CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins
前言盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
Collapsing margins(外边距合并)
开篇块元素的上边距或下边距有时会合并为一个margin,这种情况称之为外边距的合并,即collapsing margins. 一个常见的css样式的bug html&css: <!DO ...
外边距折叠( Collapsing margins )详解
外边距折叠( Collapsing margins )1 在介绍 margin 特性的时候,简单的介绍了外边距折叠. Collapsing margins,即外边距折叠,指的是毗邻的两个或多个外边距 ...
Collapsing margins
例子请用Firefox, Opera, Safari,google查看 before <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN& ...
html float作用,CSS float相关详解
float属性是CSS常用的一个属性,应用场景广泛,同时也是一个难点,涉及到一些相关细节及注意点.因此,就特别整理总结一下. 一.float介绍 float元素也称为浮动元素,设置了float属性的元 ...
CSS魔法堂：说说Float那个被埋没的志向
前言定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...
vue动画效果配置和弹层css sticky footer
vue动画效果配置有两种方式: 一种是css方式需要注意 4 个(CSS)类名在 enter/leave 的过渡中切换: v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移 ...
图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...
CSS 盒子模型（Box model）中的 padding 与 margin
编辑自 http://www.x6x8.com/IT/199.HTML 本文将讲述 HTML 和 CSS 的关键-盒子模型 (Box model) .理解 Box model 的关键便是 margin ...

css collapsing margins问题

概念

计算

css collapsing margins问题相关推荐

最新文章

热门文章