引入：
我们在之前的学习中学习了边框，我们发现只要是页面的标签元素，都可以实现边框的效果，那么接下来我们来讲解一个比较重要的知识点，边距，边距分为内边距和外边距，它们和边框一起是我们后面学习盒子模型的重要基础。
padding:内边距， 是指 ：边框与内容之间的距离。
| 属性 | 作用 |
|---|---|
| padding-top: | 上内边距 |
| padding-right: | 右内边距 |
| padding-bottom: | 下内边距 |
| padding-left: | 左内边距 |
后面跟几个数值表示的意思是不一样的；
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding: 3px;上下左右都是3像素 |
| 2个值 | padding: 3px 5px; 表示 上下3像素 左右 5像素 |
| 3个值 | padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
| 4个值 | padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 |
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3制作3D图片立方体旋转特效</title>
<style type="text/css">
selector {
padding: 15px; /* 设置四个内边距为相同的值 */
padding-top: 10px; /* 设置上内边距的值 */
padding-right: 5px; /* 设置右内边距的值 */
padding-bottom: 20px; /* 设置下内边距的值 */
padding-left: 10px; /* 设置左内边距的值 */
}
</style>
</head>
<body>
| 属性 | 作用 |
|---|---|
| margin | 外边距， 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。 |
| margin-top | 上外边距 |
| margin-right | 右外边距 |
| margin-bottom | 下外边距 |
| margin-left | 左外边距 |
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
代码演示：
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
selector {
margin: 20px; /* 设置四个外边距为相同的值 */
margin-top: 15px; /* 设置上外边距的值 */
margin-right: 10px; /* 设置右外边距的值 */
margin-bottom: 5px; /* 设置下外边距的值 */
margin-left: 5px; /* 设置左外边距的值 */
margin: auto; /* 居中布局 */
}
</style>
</head>
<body>
</body>
</html>
内边距 (padding)：内边距是元素内容与元素边界之间的空间。如果你给元素添加背景色，内边距的部分也会被背景色覆盖。换句话说，内边距是元素的一部分，改变内边距可以改变元素的大小。
外边距 (margin)：外边距是元素边界与周围元素之间的空间。它存在于元素的外部，与元素的背景色无关。外边距主要用来控制元素与其周围元素的距离。
##4. 内外边距总结
在使用内外边距时，需要注意以下几点：
内边距和外边距都可以使用负值。
当两个相邻元素之间存在外边距时，会发生外边距重叠。外边距重叠时，重叠的外边距取决于具体情况，通常是取两个相邻元素中较大的外边距。
内边距可以为元素增加额外的尺寸，但不会改变元素的大小；外边距会增加元素的总尺寸，可能会影响元素的位置。
在实现水平居中和垂直居中时，内外边距是非常有用的，可以节省很多复杂的布局代码。