1.背景介绍
日常使用中盒子模型是一个绕不开的话题，margin和padding都是用来产生空间，它们两个之间还是存在一些差别，这些差别表现在不同的使用方面。
The CSS margin properties are used to generate space around elements. The margin properties set the size of the white space outside the border.
CSS margin 属性就是在元素周围产生空间。margin 属性设置边框外的空白空间。
The CSS padding properties are used to generate space around content.The padding clears an area around the content (inside the border) of an element.
CSS padding属性用来在内容周围产生空间。padding 区域指一个元素的内容和其边框之间的空间。
margin和padding属性是理解盒子模型的关键，而正确理解这两个属性也是学习用css布局的关键。
盒子模型: 任意一个块级元素均由content(内容), padding(内边距), border(边框), margin(外边距)部分组成。
2.知识剖析
语法
margin和padding使用方法如下：
1 指定具体数值，如10px、10em、10rem；
2 使用百分比，基于父级内容宽度，如：10%；
3 margin可以取负值，padding不能取负值
4 简写形式
margin和padding都有简写形式，按照下面的方式顺时针分配各方向，可以数值和百分比混用
如margin: 10px; margin: 10px 10px 10px 10px ；
padding: 10px 20px; padding: 10px 20px 10px 20px
| margin/padding | top | right | bottom | left |
|---|---|---|---|---|
| 10px | 10px | 10px | 10px | 10px |
| 10px 20px | 10px | 20px | 10px | 20px |
| 10px 20px 30px | 10px | 20px | 30px | 20px |
| 10px 20px 30px 40px | 10px | 20px | 30px | 40px |
使用
1 margin是透明的，用来隔开元素与元素的间距
2 margin在布局中用于分开元素使元素与元素的间距
3 padding是用来填充元素与内容的间隔
4 在不固定高度布局中，padding用来撑起元素高度
3.常见问题
MARGIN外边距重叠
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
下面是两个表现：
1 出现在正常文档流
2 只发生在垂直方向
4.解决方案
根据上面的分析，主要从两方面入手：脱离文档流，块产生包裹性和BFC原理相似；通过盒子模型父级做出限制。
文档流 - BFC
1 position
2 float
3 display: inline-block
4 overflow
盒子模型
5 父级透明边框 border:1px solid transparent
6 父级padding
7 父级before伪元素
5.编码实战
6.扩展思考
负margin
1 布局：双飞翼布局
2 消除display：inline-block 形成的空白间距
扩大效果区域 - padding
根据盒子模型边框内部都可见，使用padding扩大效果区域。
3 a button 的点击区域
4 hover
7.参考文献
参考一 用Margin还是用Padding
参考二 CSS 外边距(margin)重叠及防止方法
参考三 margin为负值产生的影响和常见布局应用
参考四 CSS布局奇淫巧计之-强大的负边距
参考五 由浅入深漫谈margin属性
8.更多讨论
问：什么时候使用padding，什么时候使用margin?
答：margin在布局中用于分开元素使元素与元素的间距；padding是用来填充元素与内容的间隔
问：外边距重叠的机理是什么？
答：边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
1 出现在正常文档流
2 只发生在垂直方向
什么时候padding会包含在盒子宽度里面？
答：改变盒子模型，box-sizing：border-box；
技能树.IT修真院
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。