css 之 margin

【1】 margin 与 容器尺寸

 元素尺寸分为： 可视尺寸 （clientWidth） 与  占据尺寸（outerWidth）

（1）margin 与可视尺寸

适用于没有设定 width / height 的普通block水平元素，且只适用于水平方向的尺寸

（2）margin 与占据尺寸

使用于块级、内联元素，与有没有设定 width / height 无关，水平和垂直方向上都适应

【2】 margin 与百分比单位

（1）水平方向百分比 、垂直方向百分比

（2）普通元素百分比 、 绝对定位元素百分比

普通元素的百分比 margin 都是相对于容器的宽度计算的

绝对定位元素的百分比margin 是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的。

【3】 margin 重叠

——特点

（1） 发生在block 水平元素

（2） 不考虑writing-mode , 只发生在垂直方向

——情境

（1）相邻兄弟元素

（2）父级和第一个 /最后一个子元素

（3）空 block 元素

——计算规则

（1）正正取大值

（2）正负值相加

（3）负负最负值

——

【4】 margin auto

（1）当元素没有设置 width / height ，也会自动填充对应的方位，如果设置了 width / height ,自动填充特性就会被覆盖

（2） 原本应该填充的尺寸被 width / height 强制更改，而 margin ： auto 就是为了填充这个变更的尺寸设计的

（3）

【5】 margin 负值定位

（1） margin 负值下的两端对齐

（2） margin 负值下的等高布局

（3）  margin 负值下的两栏自适应布局

【6】 margin  失效情形分析

（1） 内联水平元素的垂直 margin 无效，要符合 非替换元素，例如不是<img> ,且有正常的书写模式

（2） margin 重叠

（3）display ： table-cell / display : table-row 等声明的 margin 无效

（4） position : absolute 与 margin

绝对定位元素非定位方位的 margin 值  “ 无效 ”

（5） 内联特性导致的 margin 无效

【7】 margin-start 与 margin-end

【8】补充

定义：margin指的是边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。                   ——CSS权威指南

margin也可以叫做 “外边距”，对应的padding叫 “内边距”。

margin特性

margin可以通过使用单独的属性，对上、右、下、左的外边距进行设置。

垂直外边距合并

指的是当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

垂直margin不合并的情形

float不为none

overflow  visible除外

position: absolute 或 fixed

dislapy：inline-block、table-cell、table-caption

margin 与 padding 的使用情况

可以理解成，margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。

何时应当使用margin：
需要在border外侧添加空白时。

空白处不需要背景（色）时。

上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：

需要在border内测添加空白时。

空白处需要背景（色）时。

上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

margin在块级元素下，参照基准是前一个元素，如果是第一个元素，则是相对于父元素的margin距离，而在内联元素下，margin不改变元素的行高，如果要改变内联元素行高的只能使用三个属性：line-height、font-size、vertical-align