15 margin 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .box{
 8                 height: 100px;
 9                 width: 300px;
10                 border: 10px solid red;
11                 background-color: black;
12                 /* 这个盒子下面与下个盒子距离为20px */
13                 margin-bottom:20px ;
14                 margin-left: 100px;
15             }
16             .box2{
17                 height: 100px;
18                 width: 300px;
19                 background-color: green;
20                 
21                 /*margin-left: 10px;
22                 margin-right: 20px;
23                 margin-top: 30px;
24                 margin-bottom:40px ;*/
25                 /*简写形式*/
26                 /*margin: 30px 20px 40px 10px;*/
27                 /*margin: 三个值*/
28                 /*margin: 10px(上) 20px(左右) 30px(下);*/
29                 /* margin：两个值的时候*/
30                 /*margin: 10px(上下) 20px(左右);*/
31                 /*一个值 */
32                 /*margin: 10px(上下左右);*/
33                 
34             }
35 
36         </style>
37     </head>
38     <body>
39         <div class="box"></div>
40         <div class="box2"></div>
41     </body>
42 </html>

 

黑色为300*100，红色为border

 

posted @ 2019-09-02 13:07  慕少溪梓  阅读(123)  评论(0)  编辑  收藏  举报