【CSS-task3】 什么时候用MARGIN和PADDING
分享人：陈占乐
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
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(内边距), background(包括背景颜色和图片), border(边框), margin(外边距)五个部分组成
2.知识剖析
语法
1 指定具体数值
2 使用百分比，基于父级内容宽度
3 margin可以取负值，padding不能取负值
4 简写形式
使用
1 margin是透明的，用来隔开元素与元素的间距
2 margin在布局中用于分开元素使元素与元素的间距
3 padding是用来填充元素与内容的间隔
4 在不固定高度布局中，padding用来撑起元素高度
3.常见问题
MARGIN外边距重叠
1 出现在正常文档流
2 只发生在垂直方向
4.解决方案
文档流 - 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
3 a button 的点击区域
4 hover
7.参考文献
参考五 由浅入深漫谈margin属性
8.更多讨论
鸣谢
感谢大家观看
BY : 陈占乐