html5 外边距属性,CSS重要属性之 margin 属性知识大整合(必看篇)

以下的分享是本人最近几天学习了margin知识后，大有启发，感觉以前对margin的了解简直太浅薄。所以写成以下文章，一是供自己整理思路；二是把知识分享出来，避免各位对margin属性的误解。内容可能会有点多，但都是精华，希望大家耐心学习。

以下的分享会分为如下内容：

1.margin 属性的简单介绍

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

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

2.margin 无法适用的元素

3.外边距折叠 (Collapsing margins)

3.1：Collapsing margins 初衷

3.2：Collapsing margins 类型

3.2.1：兄弟元素的 margin 重叠

3.2.2：父子元素的 margin 重叠

3.2.3：元素自身的 margin-bottom 和 margin-top 相邻时也会折叠

4.折叠后 margin 的计算规则

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

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

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

5.Collapsing margins 解决方法

1.margin 属性的简单介绍

在介绍margin之前，先剖上一张W3C标准盒模型的图片，以便读者可以查看相关位置。

margin，顾名思义，叫做外边距。

margin的基本属性有以下几点

a：margin 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的简写，表明 margin 的大小范围。

b：margin 值可以是 宽度值、百分比值或 'auto' 这3者之一。注意，margin 必须带有单位，单位可以是像素、英寸、毫米或 em。

c：margin 百分比值是相对于父元素的 width 计算的。

d：当 margin 为 margin:10px 时，表示 top,right,bottom,left (逆时针)方向都是10px；当 margin 为 margin:10px 20px 时，表示上下方向为10px，左右方向为20px；当 margin 为 margin:10px 20px 5px 时，表示top方向为10px，左右方向为20px，bottom方向为5px；当 margin 为 margin:1px 2px 3px 4px 时，表示top方向为1px，right方向为2px，bottom方向为3px，left方向为4px。

上面通过对 margin 的简单介绍，我们知道 margin 的百分比值是相对于父元素的 width 计算的，但是普通流和绝对定位元素的margin的计算是又是不相同的。

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

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

XML/HTML Code复制内容到剪贴板