在CSS的盒子模型中，每个元素都可以看作是一个矩形的盒子，内边距和外边距是盒子的重要组成部分，合理设置二者能实现更灵活的页面布局效果。
内边距padding的设置方法
内边距指的是元素的内容区域到元素边框之间的空间，通过padding相关属性设置，会扩大元素的总尺寸（除非设置了box-sizing: border-box）。
单独设置四个方向的内边距
可以分别设置上、右、下、左四个方向的内边距，对应的属性分别是padding-top、padding-right、padding-bottom、padding-left。
/* 单独设置各个方向的内边距 */
.box {
padding-top: 10px; /* 上内边距10像素 */
padding-right: 20px; /* 右内边距20像素 */
padding-bottom: 15px; /* 下内边距15像素 */
padding-left: 25px; /* 左内边距25像素 */
}
使用简写属性padding批量设置
padding作为简写属性，可以根据传入的参数数量不同，批量设置四个方向的内边距：
- 传入1个值：四个方向的内边距都设置为该值
- 传入2个值：第一个值对应上下内边距，第二个值对应左右内边距
- 传入3个值：第一个值对应上内边距，第二个值对应左右内边距，第三个值对应下内边距
- 传入4个值：分别对应上、右、下、左四个方向的内边距，顺序是顺时针
/* padding简写示例 */
.box1 {
padding: 10px; /* 上下左右内边距都是10px */
}
.box2 {
padding: 10px 20px; /* 上下10px，左右20px */
}
.box3 {
padding: 10px 20px 15px; /* 上10px，左右20px，下15px */
}
.box4 {
padding: 10px 20px 15px 25px; /* 上10px，右20px，下15px，左25px */
}
内边距的取值类型
内边距的取值可以是像素px、相对单位em/rem、百分比%等，百分比是相对于父元素的宽度计算的。
.box {
padding: 2em; /* 相对于自身字体大小的内边距 */
padding-left: 5%; /* 相对于父元素宽度的5%作为左内边距 */
}
外边距margin的设置方法
外边距指的是元素的边框到其他相邻元素或父容器边界之间的空间，通过margin相关属性设置，不会扩大元素自身的尺寸，只会影响元素与其他元素的间距。
单独设置四个方向的外边距
和padding类似，外边距也可以单独设置四个方向，对应属性为margin-top、margin-right、margin-bottom、margin-left。
/* 单独设置各个方向的外边距 */
.card {
margin-top: 20px; /* 上外边距20像素 */
margin-right: 10px; /* 右外边距10像素 */
margin-bottom: 30px; /* 下外边距30像素 */
margin-left: 15px; /* 左外边距15像素 */
}
使用简写属性margin批量设置
margin的简写规则和padding完全一致，同样支持1到4个参数的写法，顺序也是顺时针对应上、右、下、左。
/* margin简写示例 */
.card1 {
margin: 20px; /* 四个方向外边距都是20px */
}
.card2 {
margin: 20px 10px; /* 上下20px，左右10px */
}
.card3 {
margin: 20px 10px 30px; /* 上20px，左右10px，下30px */
}
.card4 {
margin: 20px 10px 30px 15px; /* 上20px，右10px，下30px，左15px */
}
外边距的特殊取值
外边距除了常规的长度取值，还支持auto值，常用于块级元素水平居中，前提是元素设置了明确的宽度。
/* 块级元素水平居中 */
.container {
width: 1200px;
margin: 0 auto; /* 上下外边距0，左右自动分配实现居中 */
}
另外外边距还支持负值，负值会让元素向对应方向偏移，可能会和其他元素产生重叠。
.overlap {
margin-top: -10px; /* 元素向上偏移10像素，可能和上方元素重叠 */
}
内边距和外边距的常见注意事项
外边距重叠问题
垂直方向相邻的两个块级元素，如果上方元素设置了下外边距，下方元素设置了上外边距，二者的外边距会发生重叠，最终间距取较大的那个值，而不是两个值相加。如果要避免重叠，可以给其中一个元素设置内边距或者触发BFC。
行内元素的内外边距限制
行内元素（如<span>、<a>）的上下内边距和上下外边距不会影响行高，也不会改变元素垂直方向的位置，只有左右内边距和左右外边距会生效。如果要让上下间距生效，需要将行内元素设置为块级元素或者行内块元素。
/* 行内元素设置块级属性后内外边距生效 */
span {
display: inline-block; /* 转为行内块元素 */
padding: 10px 20px; /* 上下左右内边距都生效 */
margin: 15px; /* 四个方向外边距都生效 */
}
box-sizing属性的影响
默认情况下，元素的总宽度是内容宽度加上内边距和边框宽度，如果设置了box-sizing: border-box，元素的总宽度会包含内边距和边框，此时设置内边距不会扩大元素的总尺寸，只会压缩内容区域的大小。
/* 设置border-box后的内边距表现 */
.box {
width: 200px;
padding: 20px;
box-sizing: border-box; /* 总宽度保持200px，内容宽度变为160px */
}