浅析 Margin 和 Padding 的区别

一、内容表达

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

padding 属性用于设置内边距，即边框与内容之间的距离。

margin 是用来隔开元素与元素的间距 ；padding 是用来隔开元素与内容的间隔

二、语法结构 

 margin 如下表：

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

 padding 如下表：

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottem	下内边距

值的个数	表达意思
padding: 5px;	1个值，代表上下左右都有5像素内边距
padding: 5px 10px;	2个值，代表上下内边距是5像素 左右内边距是10像素
padding: 5px 10px 20px;	3个值，代表上内边距5像素 左右内边距10像素 下内边距20像素
padding: 5px 10px 20px 30px;	4个值，代表上内边距5像素 右10像素 下20像素 左30像素 顺时针

 三、典型应用

3.1 margin中的典型应用

3.1.1 外边距可以让块级盒子水平居中

• 盒子必须指定了宽度（width）。

• 盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

margin-left: auto;   margin-right: auto;
margin: auto;
margin: 0 auto;

注意：

以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

3.1.2 外边距合并

1、相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时

如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：

• 尽量只给一个盒子添加 margin 值。

2、嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

• 可以为父元素定义上边框。

• 可以为父元素定义上内边距。

• 可以为父元素添加 overflow:hidden。

拓展：浮动、固定、绝对定位的盒子不会有塌陷问题

3.2 padding 中的典型应用 

3.2.1  内边距会影响盒子实际大小

1、当我们给盒子指定 padding 值之后，发生了 2 件事情：

1. 内容和边框有了距离，添加了内边距。

2. padding影响了盒子实际大小。

2、内边距对盒子大小的影响：

• 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

• 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3、解决方案：

• 如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

3.3 在块元素、内联元素的区别

HTML里分两种基本元素，即block和inline。block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行。

1. margin

• 在块级元素下，上下左右可以随意设定。且块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素，则就是相对于父元素的margin距离
• 在内联元素中，margin-top和margin-bottom对内联元素（对行）的高度没有影响，如果要改变内联元素的行高即类似文本的行间距，那么只能使用这三个属性：line-height，fong-size，vertical-align。请记住，这个影响内联元素高度的是line-height而不是height。

2. padding

• 在块级元素下，上下左右可以随意设定，会对元素内部发生改变
• 在内联元素中，行内非替换元素上设置的内边距不会影响行高计算；因此如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值，行内元素的padding元素，只有padding-left和padding-right有效果，上下不识别。

四、如何使用（重难点）

4.1 margin 的使用场景

• 需要在border (边框) 以外的区域添加空白间距时；
• 空白区域不需要使用背景颜色时
• 需要使用负值对页面布局时 (注意：margin的值可以取负数, padding的值是不能使负数的)
• 注意： 上下两个相连的盒子之间使用的外边距需要相互抵消

例如：15px + 20px 的margin ，最终得到的是 20px 的空白 

说明：
margin在垂直方向上相邻的值相同时会发生叠加， 水平方向的值会相加。margin取负值时， 在垂直方向上， 两个元素的边界仍然会重叠， 但是， 此时一个为正数， 一个为负数， 并不是取其中较大的值， 而是用边界的绝对值， 也就是正的边界值和负的边界值相加。

4.2 padding 的使用场景

• 需要在border内侧添加空白
• 空白区域需要使用到背景颜色
• 注意： 上下相连的两个盒子之间的空白， 间距是两者之和

例如：15px + 20px 的padding ，最终得到的是 35px 的空白  

想要继续了解的小伙伴记的点赞关注哦，有问题也可以私信讨论，互相学习进步！