1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 .outerDiv{
9 width: 500px;
10 height: 300px;
11 border: 1px solid rgb(236, 132, 132);
12 background-color: rgb(141, 228, 240);
13 margin: 0px auto; /*上下 左右*/ /*auto 自动平均分配 可居中*/
14 }
15
16 .innerDiv{
17 width: 100px;
18 height: 100px;
19 border: 1px solid rgb(136, 232, 135);
20 float: left;
21 }
22
23 /*
24 padding 内边距
25 margin 外边距
26 */
27
28 .d1{
29 background-color: rgb(229, 237, 162);
30 /*
31 margin-right: 10px;
32 margin-top: 10px;
33 margin-left: 10px;
34 padding-top: 10px;
35 padding-bottom: 10px;
36 padding-left: 10px;
37 padding-right: 10px;
38 */
39 margin: 5px 10px 15px 20px; /*上 右 下 左*/
40 padding: 5px 10px 15px 20px;
41 }
42
43 .d2{
44 background-color: rgb(249, 215, 170);
45 margin-left: 10px;
46 }
47
48 .d3{
49 background-color: rgb(176, 176, 238);
50 }
51
52 </style>
53 </head>
54 <body>
55 <div class="outerDiv">
56 <div class="innerDiv d1">div1</div>
57 <div class="innerDiv d2">div2</div>
58 <div class="innerDiv d3">div3</div>
59 </div>
60 </body>
61 </html>
标签：盒子,05,color,模型,padding,rgb,background,10px,margin From： https://www.cnblogs.com/IrVolcano/p/18061175