本文来自慕课网css深入理解之margin，感谢 张鑫旭老师，由于知识点太多，所以以截图的形式，方便理解
首先上一个标准盒模型
margin与可视尺寸的关系：在没有设定宽高的普通block水平元素前提下，只能改变水平的可视宽高，下图为默认
当margin左右变为-50px，水平方向发生了变化
当水平变为100px
但是，垂直方向发生变化则没有改变可视尺寸
下面是实际场景的应用，将浮动的文字环绕效果变成一侧定宽的自适应布局，如图
下面是margin预占据尺寸的关系，适用条件很广，条件要求如下
通过修改margin-bottom的值能直观的提现到background上面
应用场景：如底部留白，一些浏览器不支持通过padding设置的留白，但margin的兼容性最好