边距
在CSS中，边距与填充是两个不同的概念，都是用于控制元素之间的空间和影响页面的布局。
边距（外边距）
边距（margin）是指元素与其相邻元素之间的空间，边距可以用于控制元素之间的距离，影响页面的布局，边距本身没有背景颜色，是完全透明的，不会影响元素的实际大小。可以为正值或负值，单位可以是像素（px）、百分比（%）、em等。
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .base {
width: 200px;
height: 200px;
}
.example1 {
margin: 10%;
background-color: blue;
}
.example2 {
margin: -50px 50px;
background-color: green;
}
.example3 {
margin: 10px 20px 30px 40px;
background-color: red;
}
|
1
2
3
4
5
| <div class="base example1"></div>
<br>
<div class="base example2"></div>
<br>
<div class="base example3"></div>
|
效果：
可使用 margin-top、margin-right、margin-bottom、margin-left 单独设置某一方向的边距。
示例：
1
2
3
4
5
6
7
8
9
| .example1 {
margin-top: 100px;
margin-right: 50px;
margin-bottom: 80px;
margin-left: 50px;
background-color: blue;
width: 200px;
height: 200px;
}
|
1
| <div class="example1"></div>
|
效果：
填充（内边距）
填充（padding）是指元素内部内容与元素边框之间的空间，填充可以用于调整元素内部内容与边框之间的距离，影响元素的尺寸和布局，填充会继承元素的背景颜色，会影响元素的实际大小。不支持负值，单位可以是像素（px）、百分比（%）、em等。
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .base {
width: 200px;
height: 200px;
}
.example1 {
padding: 3%;
background-color: blue;
}
.example2 {
padding: 10px 50px ;
background-color: green;
}
.example3 {
padding: 10px 20px 30px 40px;
background-color: red;
}
|
1
2
3
4
5
| <div class="base example1">padding测试</div>
<br>
<div class="base example2">padding测试</div>
<br>
<div class="base example3">padding测试</div>
|
效果：
可使用 padding-top、padding-right、padding-bottom、padding-left 单独设置某一方向的填充。
示例：
1
2
3
4
5
6
7
8
9
| .example1 {
padding-top: 20px;
padding-right: 50px;
padding-bottom: 80px;
padding-left: 10px;
background-color: blue;
width: 200px;
height: 200px;
}
|
1
| <div class="example1">padding测试</div>
|
效果：
