一、什么是邊距

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

二、什么是內(nèi)邊距，什么是外邊距

代碼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)邊框外延距離另一個(gè)元素邊框外延(如果另一個(gè)元素和margin作用元素同級(jí)(這里是class值為test1的div))或內(nèi)延(如果另一個(gè)元素是margin作用元素父級(jí))的距離，如上圖；

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

③、內(nèi)邊距和外邊距是針對(duì)于其作用的元素和其他元素來講的，某一元素的內(nèi)邊距在另一個(gè)元素看來有可能是外邊距，比如：class值為test2div的內(nèi)邊距在class值為test2_test?div元素看來就是外邊距，所以上面代碼也可以這樣寫：將class值為test2的div樣式列表中“padding-top:40px;”去掉，class值為test2_test?div元素添加“margin-top:40px;”——這樣的效果和代碼2-1是一樣的；

三、margin和padding的屬性值

①、它們的默認(rèn)值都是0；它們的屬性值都可以為auto——margin作用的元素由瀏覽器計(jì)算外邊距，padding作用的元素由瀏覽器計(jì)算內(nèi)邊距；都 可通過設(shè)定屬性值為inherit而繼承父元素邊距——margin繼承父元素外邊距，padding繼承父元素內(nèi)邊距，但由于inherit在任何的版 本的 Internet Explorer (包括 IE8)都不支持，所以也就沒有學(xué)習(xí)的必要了。

②、margin允許指定負(fù)的外邊距值，不過使用時(shí)要小心；padding不允許指定負(fù)邊距值；

③、margin和padding的屬性值都可以有1個(gè)、2個(gè)、3個(gè)和4個(gè)：

a、margin有4個(gè)屬性值(例如margin:10px 5px 15px 20px;)， 其含義是：上外邊距10px、右外邊距5px、下外邊距15px、左外邊距20px；

padding有4個(gè)屬性值(例如padding:10px 5px 15px 20px;)，其含義是：上內(nèi)邊距10px、右內(nèi)邊距5px、下內(nèi)邊距15px、左內(nèi)邊距20px；

總結(jié)：無論是margin還是padding，如果有4個(gè)屬性值，那么它們的作用方向順時(shí)針??依次為上、右、下、左；

b、margin有3個(gè)屬性值(例如margin:10px 5px 15px ;)， 其含義是：上外邊距10px、右外邊距和左外邊距5px、下外邊距15px；

padding有3個(gè)屬性值(例如padding:10px 5px 15px;)，其含義是：上內(nèi)邊距10px、右內(nèi)邊距和左內(nèi)邊距5px、下內(nèi)邊距15px；

總結(jié)：無論是margin還是padding，如果有3個(gè)屬性值，那么它們的作用方向順時(shí)針??依次為上、右左、下；

c、margin有2個(gè)屬性值(例如margin:10px 5px;)， 其含義是：上外邊距和下外邊距10px、右外邊距和左外邊距5px；

padding有2個(gè)屬性值(例如padding:10px 5px;)，其含義是：上內(nèi)邊距和下內(nèi)邊距10px、右內(nèi)邊距和左內(nèi)邊距5px；

總結(jié)：無論是margin還是padding，如果有2個(gè)屬性值，那么它們的作用方向順時(shí)針??依次為上下、右左；

d、margin有1個(gè)屬性值(例如margin:10px;)， 其含義是：4 個(gè)外邊距都是 10px；

padding有1個(gè)屬性值(例如padding:10px;)，其含義是：4 個(gè)內(nèi)邊距都是 10px；

總結(jié)：無論是margin還是padding，如果有1個(gè)屬性值，那么它們的邊距值都是相等的

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。