margin

1实线 可视尺寸 clientWidth（标准）
2虚线 占据尺寸 outerWidth（jquery）

margin 影响可视尺寸
条件
1、适用于没有设定width/height的普通block水平元素
float元素absolute/fixed元素 inline元素 table-cell元素排除
2、只适用于水平方向
案例
一侧定宽的自适应布局

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

绝对定位元素的百分比margin相对于第一个定位祖先元素的宽度计算的。
案例
自适应矩形

margin 重叠通常特性
父子 margin重叠的条件
一、margin-top
1父元素非块状格式化上下文元素
2父元素没有border-top
3父元素没有padding-top
4父元素与第一个子元素之间没有inline元素分隔
二、margin-bottom
1父元素非块状格式化上下文元素
2父元素没有border-bottom
3父元素没有padding-bottom
4父元素与最后一个子元素之间没有inline元素分隔
5父元素没有height ，min-height，max-height限制

空block元素发生margin重叠的条件
1元素没有border设置
2元没有padding设置
3里面没有inline元素设置
4没有height ，min-height

margin-auto
如果一侧定值一侧为auto ，auto为剩余空间的大小，如果两侧均为auto 则平分剩余空间

为什么给图片设置margin：0 auto 不水平居中
因为图片是inline-block元素 ，不会填充 剩余空间

解决 加display：block

writling-mode垂直居中
writling-mode:vertical-lr 更改流为垂直方向。


margin无效情况
1内联元素垂直方向margin无效
2margin重叠
3display: table-cell/display:table-row无效

在谷歌浏览器下botton永远是是inline-block元素