一、什麼是邊距
CSS中的邊距指的是當前元素border與周圍其它元素border的距離（或者稱為空白間）。
二、什麼是內邊距，什麼是外邊距
代碼2-1：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
}
.test1{
width:150px;
height:150px;
border:6px solid red;
}
.test2{
margin-top:40px;
padding-top:40px;
width:150px;
height:150px;
border:6px solid gray;
}
.test2_son{
width:80px;
height:50px;
border:12px solid blue;
}
</style>
</head>
<body>
<p class="test1">test1</p>
<p class="test2">
<p class="test2_son">test2_son</p>
</p>
</body>
</html>
圖01
說明：圖01中灰色地帶是class值為test2的p的邊框，它是有寬度的；
①、外邊距：外邊距指的是margin作用元素（這裡是class值為test2的p）邊框外延距離另一個元素邊框外延（如果另一個元素和margin作用元素同級（這裡是class值為test1的p））或內延（如果另一個元素是margin作用元素父級）的距離，如；
②、內邊距：內邊距指的是margin作用元素（這裡是class值為test2的p）邊框內延距離其子項目邊框外延的距離，如；
③、內邊距和外邊距是針對於其作用的元素和其他元素來講的，某一元素的內邊距在另一個元素看來有可能是外邊距，比如：class值為test2 p的內邊距在class值為test2_test p元素看來就是外邊距，所以上面代碼也可以這樣寫：將class值為test2的p樣式列表中“padding-top:40px;”去掉，class值為test2_test p元素添加“margin-top:40px;”——這樣的效果和代碼2-1是一樣的；
三、margin和padding的屬性值
①、它們的預設值都是0；它們的屬性值都可以為auto——margin作用的元素由瀏覽器計算外邊距，padding作用的元素由瀏覽器計算內邊距；都可通過設定屬性值為inherit而繼承父元素邊距——margin繼承父元素外邊距，padding繼承父元素內邊距，但由於inherit在任何的版本的 Internet Explorer （包括 IE8）都不支援，所以也就沒有學習的必要了。
②、margin允許指定負的外邊距值，不過使用時要小心；padding不允許指定負邊距值；
③、margin和padding的屬性值都可以有1個、2個、3個和4個：
a、margin有4個屬性值(例如margin:10px 5px 15px 20px;)， 其含義是：上外邊距10px、右外邊距5px、下外邊距15px、左外邊距20px；
padding有4個屬性值(例如padding:10px 5px 15px 20px;)，其含義是：上內邊距10px、右內邊距5px、下內邊距15px、左內邊距20px；
總結：無論是margin還是padding，如果有4個屬性值，那麼它們的作用方向順時針 依次為上、右、下、左；
b、margin有3個屬性值(例如margin:10px 5px 15px ;)， 其含義是：上外邊距10px、右外邊距和左外邊距5px、下外邊距15px；
padding有3個屬性值(例如padding:10px 5px 15px;)，其含義是：上內邊距10px、右內邊距和左內邊距5px、下內邊距15px；
總結：無論是margin還是padding，如果有3個屬性值，那麼它們的作用方向順時針 依次為上、右左、下；
c、margin有2個屬性值(例如margin:10px 5px;)， 其含義是：上外邊距和下外邊距10px、右外邊距和左外邊距5px；
padding有2個屬性值(例如padding:10px 5px;)，其含義是：上內邊距和下內邊距10px、右內邊距和左內邊距5px；
總結：無論是margin還是padding，如果有2個屬性值，那麼它們的作用方向順時針 依次為上下、右左；
d、margin有1個屬性值(例如margin:10px;)， 其含義是：4 個外邊距都是 10px；
padding有1個屬性值(例如padding:10px;)，其含義是：4 個內邊距都是 10px；
總結：無論是margin還是padding，如果有1個屬性值，那麼它們的邊距值都是相等的；
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
