元素占用寬度 = 元素寬度+padding+border+margin

注意margin只是隔開元素，不會使得元素變大，而padding會使得元素變大，也就是說

元素真實寬度=元素寬度+padding+border

border 在元素的外層

一、關于Padding

1、設置對象四邊的內邊距。默認值是0。

2、如果提供全部四個參數值，將按上、右、下、左的順序作用于四邊。

3、如果只提供一個，將作用于全部的四邊。

4、如果提供兩個，第一個作用于上、下，第二個作用于左、右。

5、如果提供三個，第一個作用于上，第二個作用于左、右，第三個作用于下。

6、內聯對象要使用該屬性，必須先設定對象的height或width屬性(在樣式表中將width和height寫在padding前面即可)，或者設定position屬性為absolute。不允許負值。

7、內邊距留白處總是透明的，并且設置內邊距會直接影響對象的大小。

提示：

(1)設置了padding屬性就相當于增加了對象的大小。原寬270px，高175px，設置padding:30px 0 0

40px后對象的大小應該是寬為310px，高為205px，要想保持原大小就必須減去相應的寬高。所以，對象的寬是270-40=230px，高是

175-30=145px。

(2)padding是不具有繼承性的。

(3)padding屬性是可以分別設置的。padding-top、padding-right、padding-bottom、padding-left分別作用于上、右、下、左四邊。語法和參數和padding的設置相同。

二、關于margin

(1)設置對象四邊的外邊距。默認值是0。

(2)如果提供全部四個參數值，將按上、右、下、左的順序作用于四邊。

(3)如果只提供一個，將作用于全部的四邊。

(4)如果提供兩個，第一個作用于上、下，第二個作用于左、右。

(5)如果提供三個，第一個作用于上，第二個作用于左、右，第三個作用于下。

(6)內聯對象要使用該屬性，必須先設定對象的height或width屬性，或者設定position屬性為absolute。

(7)外邊距總是透明的，并且設置外邊距不會直接影響對象的大小，只是相對位置發生變化。

提示：

(1)margin屬性不具有繼承性。由于IE的雙邊距BUG會往往導致內聯對象設置邊距后與父對象左邊的距離實際值不符，遇到這樣的問題就加display:inline;，意思是把對象視作行級元素。

(2)設置內聯對象的上下邊距是不會出現雙邊距問題的。margin不具有繼承性，內聯對象設置左右邊距時出現雙倍邊距完全是IE的BUG。

(3)margin屬性是可以分別設置的。margin-top、margin-right、margin-bottom、margin-left分別作用于上、右、下、左四邊。

總結

以上是生活随笔為你收集整理的padding 后尺寸变化 设置_padding margin border 和元素大小的全部內容，希望文章能夠幫你解決所遇到的問題。

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