HTML中關於內邊距(paddiing)外邊距(margin)使用

本文轉載自查看原文 2020-03-18 21:28 6401

首先內邊距基本格式

                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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 padding和margin——內邊距和外邊距 css之去除html標簽默認的外邊距margin和內邊距padding padding(內邊距)、margin(外邊距)、border(邊框) 微信小程序的外邊距（margin）和內邊距（padding） css之去除html標簽默認的外邊距margin和內邊距padding,通用工具類 base.css CSS Margin（外邊距） margin(外邊距) css中margin上下外邊距重疊問題理解CSS外邊距margin css常用屬性：居中展示、內邊距、外邊距