12.1 內外抉擇
在什么場景中使用padding，在什么場景中使用margin，這是一個學問。你掌握了，學問就有了。
這是用padding的學問
（1）需要在border內側添加空白，在文字與邊框留有距離時；
（2）空白處需要背景色時；
（3）上下相連的兩個盒子之間的空白希望等于兩者之和時，比如15px+20px的padding，將得到35px的空白。
這是用margin的學問
（1）需要在border外側添加空白時;
（2）空白處不需要有背景色時;
(3）上下相連的兩個盒子之間的空白需要相互抵消時，比如15px+20px的margin，將得到20px的空白。
12.2 內外有別
在CSS中，通過外邊距margin屬性，可設置元素周圍的空間。可用margin統一指定4邊，也可用margin-top等屬性，特指其中一邊。這種方案，在CSS中是很常見的。padding和margin的作用不同，但用法是一樣的。為了區分效果，我只在一個div中用了padding，通過比較，一目了然。
在CSS表文件ys2.css中的代碼
/*單獨指定一個邊距*/
.one-margin {
margin-left: 100px;
}
/*4個邊距*/
.four-margin {
background: cadetblue;
width: 400px;
height: 200px;
margin: 10px 20px 30px 50px;
}
/*加上padding*/
.use-padding {
background: cadetblue;
width: 400px;
height: 200px;
margin: 10px 20px 30px 50px;
padding-top: 20px;
}在HTML文件中的代碼
<div class="big-div">
<h1 class="one-margin">margin用法</h1>
<div class="four-margin">
margin一個值：4個邊距;<br/>
margin兩個值：上下邊距、左右邊距;<br/>
margin三個值：上邊距、左右邊距、下邊距;<br/>
margin四個值：上邊距、右邊距、下邊距、左邊距。
</div>
<div class="use-padding">
padding一個值：4個邊距;<br/>
padding兩個值：上下邊距、左右邊距;<br/>
padding三個值：上邊距、左右邊距、下邊距;<br/>
padding四個值：上邊距、右邊距、下邊距、左邊距。<br/>
為了區分margin和margin，我只用 padding-top,你能看出效果么?
</div>
</div>輸出結果
好了，有關CSS邊距的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。
原創文章，作者：清風徐來，如若轉載，請注明出處：http://www.69xo69.com/14464.html
