大家好，我是IT修真院深圳分院第01期学员，一枚正直善良的web程序员。
今天给大家分享一下，修真院官网 CSS任务中可能会使用到的知识点：
什么时候用padding什么时候用margin?
1.背景介绍
什么是margin 什么是padding
我们在进行网页制作时都会遇到为元素设定边距的情况，边距又分为内边距和外边距，即margin和padding.
margin和padding是在html中的盒模型的基础上出现的，
margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。
2.知识剖析
margin是什么？
CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School
边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南
padding是什么？
padding 属性设置元素的内边距,属性定义元素边框与元素内容之间的空间。
同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”
Margin的特性
margin始终是透明的。margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。
margin只有一个值表示上右下左，如果 margin 只有两个值第一个值表示上下，第二个值为左右。
margin有三个值 表示上左右下，margin有四个值表示上下左右四个方向。
padding的特性
padding属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，
从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
3.常见问题
1.什么是盒子模型。
2.margin和padding的区别。
3.用margin好还是用padding好。
4.解决方案
什么是盒子模型。
具备内容、填充、边框、边界这些属性，能包含其他元素的容器都是盒子。
margin和padding的区别。
我们以DIV为一个盒子为例，既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西，而里面存放东西的区域我们给他起个名字叫“content(内容)”，而盒子的纸壁给他起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫“padding(内边距)”，如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为"margin(外边距)"
用margin好还是用padding好
何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。
何时应当时用padding：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。
margin在块级元素
margin在块级元素下，他的性能可以完全体现，上下左右任你设定.
margin在行级元素
margin也能用于内联元素，这是规范所允许的，但是margin-top和margin-bottom对内联元素（对行）的高度没有影响，并且由于边界效果(margin效果)是透明的，他也没有任何的视觉影响。
总结
margin属性可以应用于几乎所有的元素，除了表格显示类型。
padding属性的使用1.需要在border内测添加空白时。
2.空白处需要背景（色）时。
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。
5.编码实战
6.扩展思考
什么是margin折叠？
在CSS中，两个或以上的块元素（可能是兄弟，也可能不是）之间的相邻外边距可以被合并成一个单独的外边距。通过此方式合并的外边距被称为折叠，且产生的已合并的外边距被称为折叠外边距。 处于同一个块级上下文中的块元素，没有行框、没有间隙、没有内边距和边框隔开它们，这样的元素垂直边缘毗邻，则称之为相邻。
7.参考文献
参考一：margin的详细用法
参考三盒子模型知多少
8.更多讨论
1.margin和padding可以为负的嘛？
margin使用负数比较常见，使用负数是为了让标签向某个方位缩进，这样就不用加position属性来定位了，例如多个div使用负数可以达到层叠的效果，有点类似多张白纸叠在一起的感觉
而padding使用负数的话，一般页面效果会更差，至少我还没想到怎样的页面布局需要用到padding的负数值
2.子元素、父元素的垂直margin如何计算
以两个值中最大的值为标准.
3.如何利用margin设置垂直水平居中？
块级元素margin{ 0 , auto }
4.负值margin有什么常见用法，双飞翼布局是什么原理
1.水平垂直居中 2.去除列表最后一个li元素的border-bottom3.多列等高
5.为什么垂直相邻margin会重合
css规定两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。
6.padding设为百分比时是相对于什么计算的
相对于父级元素.
7.怎样防止margin重叠
应用BFC
ppt:https://ptteng.github.io/WEB/ppt/margin与padding的区别.html#/
腾讯视频: https://v.qq.com/x/page/m0522zbvb9h.html
鸣谢
感谢大家观看
By吴昊杰
