区别

margin对整个标签起作用,是外边距;而padding对标签的内容起作用,是内边距

下图中div2使用了margin和padding,margin是div2div1的边距,padding是div2div3的边距

image-20230115233758713

使用

margin

语法结构 说明
margin-left:10px 左外边距
margin-right:10px 右外边距
margin-top:10px 上外边距
margin-bottom:10px 下外边距
margin:10px 四边统一外边距
margin:10px 20px 上下、左右外边距
margin:10px 20px 30px 上、左右、下外边距
margin:10px 20px 30px 40px 上、右、下、左外边距

padding

语法结构 说明
padding-left:10px 左内边距
padding-right:10px 右内边距
padding-top:10px 上内边距
padding-bottom:10px 下内边距
padding:10px 四边统一内边距
padding:10px 20px 上下、左右内边距
padding:10px 20px 30px 上、左右、下内边距
padding:10px 20px 30px 40px 上、右、下、左内边距

属性可能取的值

单位 说明
length 规定具体单位记的内边距长度
% 基于父元素的宽度的内边距的长度
auto 浏览器计算内边距
inherit 规定应该从父元素继承内边距

测试

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS中margin和padding的区别</title>
<style>
.boderOuter{
border: 2px solid red;
margin-left: 20%;
margin-right: 20%;
}
.boderInter1{
border: 2px dotted blue;
}
.boderInter2{
border: 2px dotted blue;
margin: 5px 0px 5px 5px;
padding: 6px 0px 6px 6px;
}
</style>
</head>
<body>
<div class="boderOuter">
<div class="boderInter1">
<span>111</span>
</div>
</div>
<div class="boderOuter" style="margin-top: 20px;">
<div class="boderInter2">
<span>222</span>
</div>
</div>
</body>
</html>

结果截图

通过两个div区块对比可以看出:margin对整个标签有效,padding则对起内容有效

image-20230115022424158