内边距

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

简写

简写	含义
padding: 10px;	上下左右内边距各为10px
padding: 10px 20px;	上下内边距为10px，左右内边距为20px
padding: 10px 20px 25px;	上内边距为10px，左右内边距为20px，下内边距为25px
padding: 2px 4px 6px 8px;	上内边距为2px，右内边距为4px，下内边距为6px，左内边距为8px

如果你想给一个div设置一个内边距，但是又不想让该div变形，那就不要给该div设置宽高

设左右内边距时不设置div的宽

设上下内边距时不设置div的高

---

外边距

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

简写

简写	含义
margin: 10px;	上下左右外边距各为10px
margin: 10px 20px;	上下外边距为10px，左右外边距为20px
margin: 10px 20px 25px;	上外边距为10px，左右外边距为20px，下外边距为25px
margin: 2px 4px 6px 8px;	上外边距为2px，右外边距为4px，下外边距为6px，左外边距为8px

让盒子水平居中必须要有两个条件：

1. 盒子必须指定宽度（width）
2. 盒子左右两边的外边距设置为auto

 div {
     width: 100px;
     height: 200px;
     background-color: pink;
     /* 水平居中 */
     margin: 0px auto;
 }

<div>

</div>

---

/* 左外边距最大，就是右对齐 */
margin-left: auto;
/* 右外边距最大，就是左对齐 */
margin-right: auto;

---

注意点

父盒子中有一个子盒子，父盒子顶部外边距为50px，子盒子的顶部外边距为100px，注意，这里会导致盒子塌陷问题，此时你会发现父盒子的外边距为100px，子盒子的外边距为0px

我的目的是让 子盒子 到 父盒子 的距离要有100px，但父盒子的外边距不变

解决方法：

1. 给父盒子设置边框（border）
2. 给父盒子设置内边距（padding）
3. 给父盒子添加 overflow: hidden; 元素

---

清楚内外边距

网页元素很多都是带有内外边距的，而且浏览器的不同，内外边距也会不同

所以在布局前需要我们手动清楚内外边距

* {
	margin: 0;
	padding: 0;
}

---

行内元素为了照顾兼容性，所以尽量只设置左右外边距，不要设置上下外边距（当然，如果你将行内元素转换为块元素或者行内块元素，就没有这些限制了）

---