margin
元素尺寸：border-box DOM属性里的offsetWidth 和offsetHeight
元素内部尺寸： padding-box DOM属性里的clientWidth 和 clientWidth
元素外部尺寸： margin-box 理解为元素占据的空间尺寸。-margin
元素设定了 width 值或者保持“包裹性”的时候，margin 对尺寸没有 影响，只有元素是“充分利用可用空间”状态的时候，margin 才可以改变元素的可视尺寸。
小技巧
实现背景色
（1）设置display:table-cell ,但最多三栏
（2）使用border边框模拟 border-bottom: 9999px solid transparent ie7+且不支持百分比
（3）使用margin-bottom和-margin-bottom设置-9999px 9999px配合父级的overflow:hidden
margin百分比值
不论水平方向还是垂直方向都是相对于宽度计算
--margin合并
（1）块级元素，不包括浮动和绝对定位元素
（2）不考虑writing-mode的情况下，只发生在和当前文档流垂直的方向上
发生的场景
（1）兄弟元素之间
（2）父元素包含的第一个子元素或最后一个子元素的margin-top和margin-bottom
（3）空块级元素的合并margin-top和Margin-bottom合并
计算规则
负负值相加取绝对值大的
对于margin:0的审视
对于绝大多数网站可以进行设置，但如果网站主要用来展示图文，则统一标签的margin,不要一股脑设置成0
大胆的使用：
.list{ ?margin-top:15px; ?margin-bottom:15px;}而不是
.list{ ?margin-top:15px;}这样设置能有有效的提升容错率
margin:auto
用来计算对应方向应该获得的剩余空间的大小
不仅仅可以居中，也可以通过设置margin-left:auto或者margin-right:auto来居左或者居右
触发的前提条件，width:auto或者height:auto,而height:auto元素不会自动的填充，因此无法触发垂直方向的居中
垂直居中的方式
父级元素设置position:relative 子元素设置：absolute width及height 在设置margin:auto
CSS进阶（四）margin
原文地址：https://www.cnblogs.com/goOtter/p/9783138.html