首先内边距基本格式
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>
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>
原文地址：https://www.cnblogs.com/chen-wei123/p/12520450.html
时间： 2024-08-02 00:00:00