html margin设置,CSS margin详解

1.margin 百分百设置

1.1：普通流的 margin 百分比设置

在普通流元素中，margin 百分比值得计算是依据其父元素的 width 计算的

1.2：绝对定位的 margin 百分比设置

在绝对定位元素中，父元素(一直向上查找)若设置了relative/absolute/fixed，则 margin 百分比值是依据父元素的 width 计算的；父元素(一直向上查找)若无设置relative/absolute/fixed，则 margin 百分比值是依据 整个页面的 width 计算的。

2.margin 无法适用的元素

有以下元素设置 margin 值是没有效果的。

a：行内元素垂直 margin 值不起作用。

b：margin 非 table 类型的元素，以及 table 类型中 table-caption, table-cell 和 inline-table 这3类。例如 TD TR TH 等，margin 是不适用的。

c：对于行内非替换元素(例如 SPAN)，垂直方向的 margin 不起作用。

3.外边距折叠 (Collapsing margins)

Collapsing margins，即外边距折叠，指的是相邻的两个或多个外边距 (margin) 会合并成一个外边距。margin 折叠 必须发生在普通流元素中

3.1：Collapsing margins 初衷

Collapsing margins 的初衷就是为了让段落显示的更加好看。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

3.2：Collapsing margins 类型(块元素)

3.2.1：兄弟元素的 margin 重叠

3.2.2：父子元素的 margin 重叠

两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。

这些 margin 都处于普通流中。

4.折叠后 margin 的计算规则

4.1：参与折叠的 margin 都是正值

在 margin 都是正数的情况下，取其中 margin 较大的值为最终 margin 值。

4.2：参与折叠的 margin 都是负值

当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移

4.3：参与折叠的 margin 中有正值，有负值

如果，相邻的 margin 中有正值，同时存在负值会怎样呢？有正有负，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。其实也就是正负相加就可以了。

5.Collapsing margins 解决方法

解决方法有如下：

a：浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠 ( 针对 兄弟元素)

注意: 浮动元素 , inline-block元素 , 绝对定位元素 都属于 BFC元素。

b：创建了块级格式化上下文(BFC, blocking formatting context )的父元素，比如说overflow:hidden，不和它的子元素发生 margin 折叠 (针对 父子元素)。

c：给父元素添加以下内容之一都可以避免发生 margin 重叠 。如 添加内容 ， 添加 padding ， 添加 border。

标签：折叠,元素,详解,外边,margins,margin,Collapsing,CSS

来源： https://www.cnblogs.com/coolly/p/14361198.html