一、什么是邊距

CSS中的邊距指的是當前元素border與周圍其它元素border的距離(或者稱為空間)。

二、什么是內邊距，什么是外邊距

代碼2-1：

html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Strict//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

body{

margin:0px;

}

.test1{

150px;

height:150px;

border:6px?solid?red;

}

.test2{

margin-top:40px;

padding-top:40px;

150px;

height:150px;

border:6px?solid?gray;

}

.test2_son{

80px;

height:50px;

border:12px?solid?blue;

}

test1test2_son

圖01

說明：圖01中灰色地帶是class值為test2的div的邊框，它是有寬度的；

①、外邊距：外邊距指的是margin作用元素(這里是class值為test2的div)邊框外延距離另一個元素邊框外延(如果另一個元素和margin作用元素同級(這里是class值為test1的div))或內延(如果另一個元素是margin作用元素父級)的距離，如上圖；

②、內邊距：內邊距指的是margin作用元素(這里是class值為test2的div)邊框內延距離其子元素邊框外延的距離，如上圖；

③、內邊距和外邊距是針對于其作用的元素和其他元素來講的，某一元素的內邊距在另一個元素看來有可能是外邊距，比如：class值為test2div的內邊距在class值為test2_test?div元素看來就是外邊距，所以上面代碼也可以這樣寫：將class值為test2的div樣式列表中“padding-top:40px;”去掉，class值為test2_test?div元素添加“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個屬性值，那么它們的邊距值都是相等的

總結

以上是生活随笔為你收集整理的html教程padding,HTML CSS——margin和padding的学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。