其他分享
首页 > 其他分享> > 11.margin外边距

11.margin外边距

作者:互联网

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6    <!--外边距的妙用:居中元素
 7    margin: 0 auto;
 8    -->
 9     <style>
10         #box{
11             width: 300px;
12             border:1px solid red;
13             margin: 0 auto;  /*边距上下为0,左右自动对齐*/
14         }
15         /*顺时针旋转的顺序
16         margin:0  上边距
17         margin:0 1px  上 右
18         margin:0 1px 2px 3px  上 右 下 左
19         */
20         h2{
21             font-size: 16px;
22             background-color: aquamarine;
23             line-height: 40px;
24             color: white;
25             margin: 0 1px 2px 3px; /*上右下左*/
26         }
27         form{
28             background: aquamarine;
29         }
30         input{
31             border:1px solid black;
32         }
33         div:nth-of-type(1){
34             padding: 10px 2px;  /*上下边距是10px,左右边距是2px*/
35         }
36     </style>
37 
38 </head>
39 <body>
40 <div id="box">
41     <h2>会员登录</h2>
42     <form action="#" method="get">
43         <div>
44             <span>用户名</span>
45             <input type="text">
46         </div>
47         <div>
48             <span>密码</span>
49             <input type="password">
50         </div>
51         <div>
52             <span>邮箱</span>
53             <input type="email">
54         </div>
55     </form>
56 
57 </div>
58 </body>
59 </html>

 

 

标签:11,3px,color,2px,1px,background,外边,margin
来源: https://www.cnblogs.com/wzq135/p/15362273.html