margin的作用：
一：改变可视区域的尺寸
注意点：1.适用于没有设定width/height的普通block元素
2.只适用于水平尺寸，不会改变行高
应用： 实现一侧定宽的自适应布局
<!DOCTYPE html>
<html>
<head>
<title>一侧定宽的自适应布局</title>
<meta charset="utf-8">
<style type="text/css">
.auto{
border: 1px solid blue;
}
.auto img{
float: left;
width: 80px;
height: 80px;
border: 1px solid blue;
margin: 20px;
}
.auto p{
margin-left: 120px;
}
</style>
</head>
<body>
<div class="auto">
<img src="1.jpeg">
<p>本间芽衣子是动画《我们仍未知道那天所看见的花的名字》及其衍生作品的女主角。拥有白皙的皮肤，白色的直长发，性格天然，有点“少根筋”，身材娇小的少女。五年前因意外滑下山崖，由于溪河十分湍急溺水而死。五年后出现在宿海仁太面前,并且以类似幽灵的型态存在。一开始只有仁太能看见，能碰到任何东西，也能吃饭，能打电话却无法出声。可以用以前的日记本和超平和busters的成员交流，并在十年后重新凝聚起当年的超平和busters，希望大家能不再为自己的事情而闹别扭，是组织中的核心。最后在大树下实现了“自己的愿望”，最后大家都看见了她，在微笑中消失了。</p>
</div>
</body>
</html>
二：改变占据尺寸
注意点：1.block/inline-block元素都可以使用
2.与width/height无关
3.适用于水平、垂直方向尺寸
百分比margin的计算规则：
普通元素的百分比margin都是相对于容器宽度计算的，而绝对定位元素的百分比margin是相对于第一个定位祖先元素的宽度计算的。
margin重叠：
margin重叠通常特性：
1.block水平元素（不包括float和absolute元素）
2.不考虑writing-mode，只发生在垂直方向（margin-top/margin-bottom）
margin重叠3种情境：
1.相邻的兄弟元素
2.父级和第一个/最后一个子元素
父子margin重叠其他条件
margin-top重叠：a.父元素非块状格式化上下文元素
b.父元素没有border-top设置
c.父元素没有padding-top值
d.父元素和第一个子元素之间没有inline元素分隔
margin-bottom重叠：a.父元素非块状格式化上下文元素
b.父元素没有border-bottom设置
c.父元素没有padding-bottom值
d.父元素和最后一个子元素之间没有inline元素分隔
e.父元素没有height，min-height
3.空的block元素
发生重叠的其他条件：a.元素没有border设置
b.元素没有padding值
c.里面没有inline元素
d.没有height，或者min-height
margin重叠的计算规则：
a.正正取大值
b. 正负值相加
c.负负最负值
margin重叠的意义：
a.连续段落或列表，如果没有margin重叠，首尾间距会和其他兄弟标签1：2关系，使得排版不自然
b.web中任何地方嵌套或者放入空div，不会影响原来的布局
c.遗落的空任意多个<p>元素，不会影响原来的阅读顺序
margin：auto，适用于block元素，能自动填充的元素
margin无效情况：
1.inline水平元素的垂直margin无效（有两个前提：a.非替换元素.b.正常书写模式）
2.margin重叠
3.display：table-cell/display:table-row等声明的margin无效
4.position:absolute与margin，绝对定位元素非定位方位的margin值无效
5.内联特性导致的margin无效（内联元素默认基线对其）
margin start与margin end：
1.正常的流向，margin-start等同与margin-left，两者重叠不累加
2.如果水平流是从右往左，margin-start等同于margin-rgiht
3.在垂直流下（writing-mode：vertical-*；），margin-start等同于margin-top
来源：https://www.cnblogs.com/x-blank/p/6581050.html