padding 使用必記

說起了padding可謂是盒子模型中最常用的乙個屬性，你真的了解padding嗎？那我請問您設定padding會影響盒子的寬度與高度嗎？也許好多人會回答padding會影響到盒子的寬度與高度。在我看來，padding是不會影響盒子寬度與高度，padding會影響盒子寬度與高度的。前提是：

1、padding值暴走，一定會影響尺寸 2、width非auto，padding影響尺寸 3、width為auto 或者box-sizing為border-box，同時padding沒有暴走，不影響尺寸

------**於--張鑫旭筆記-----複製**

接下來我們來看一看

/**css***/
.padd
"padd">
複製**

效果圖：

沒有padding值時候。

padding暴走

定寬度的div，width不是auto則padding影響尺寸。

/**css***/
.padd
"padd">
複製**

如圖：

寬度為30px高度為30px,padding為10實際尺寸則為50px*50px

先看看width為auto的時候。

/**css***/ html,body .contents .body "contents"> "body"> 小小坤--padding-使用必記

複製**

如圖：

沒有設定padding值

設定padding值

如果div父元素沒有設定寬度高度，div設定padding值，width：auto，則不會影響尺寸。如果div父元素設定固定寬度高度，div設定padding則，父元素會受到高度影響。由於div沒有設定寬度高度，它的寬度與父元素是相同的，高度也如此。

設定div的css box-sizing為border-box,是不會影響實際尺寸。如圖

通過上邊的案例得到 padding值影響尺寸的前提是，寬度，與padding暴走與box-sizing為border-box三要素。只要記住了上邊三要素。麻麻再也不要擔心padding值引起寬度改變啦！！！