HTML中关于内边距（paddiing）外边距（margin）使⽤⾸先内边距基本格式
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
缩写形式
padding：上右下左；
上代码
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8"/>
5<title></title>
6<style type="text/css">
7            .box1{
8                width: 100px;
9                height: 100px;
10                background-color: aqua ;
11
12                padding-top: 10px;
13                padding-right: 10px;
14                padding-bottom: 10px;
15                padding-left: 10px;
16            }
17            .box2{
18                width: 100px;
19                height: 100px;
20                background: blueviolet;
21
22                padding: 10px 20px 30px 40px;
23            }
24</style>
25</head>
26<body>
27<div class="box1">内边距测试1内边距测试1内边距测试1内边距测试1内边距测试1</div>
28<div class="box2">内边距测试2内边距测试2内边距测试2内边距测试2内边距测试2</div>
29</body>
padding是外边距还是内边距
30</html>
2.⾸先，外边距基本格式和内边距⼀样
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
缩写格式
margin: 上右下左;
其次，在默认布局的垂直⽅向上，外边距会合并，⽔平⽅向不会合并 1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8"/>
5<title></title>
6<style type="text/css">
7            .box1{
8                width: 100px;
9                height: 100px;
10                background-color: aqua ;
11                margin-bottom: 30px;
12                }
13            .box2{
14                width: 100px;
15                height: 100px;
16                background: blueviolet;
17                margin-top: 20px;
18                }
19            .box3{
20                width: 100px;
21                height: 100px;
22                background-color: aqua ;
23                margin-bottom: 30px;
24
25            }
26            .box4{
27                width: 100px;
28                height: 100px;
29                background: blueviolet;
30                margin-top: 50px;
31                }
32</style>
33</head>
34<body>
35<div class="box1">div测试1</div>
36<div class="box2">div测试2</div>
37<div class="box3">div测试1</div>
38<div class="box4">div测试2</div>
39</body>
40</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。