CSS認知增加填充值，內容塊自動增加？

樹塊的寬度是 50（寬度）+ 50（左填充）+ 50（右填充）= 150px，新增的填充是內部填充，背景顏色與樹相同，所以你的藍色塊變為 150px

如果你的藍色塊只有 50px，你必須使用 margin，， tree，，這樣你的藍色塊只有 50px 寬，左右邊距是 50px

CSS規範指出，邊框繪製在“元素背景上方”。 這很重要，因為某些邊框是“中止的”（例如，虛線或虛線），並且元素的背景應出現在邊框的可見部分之間。

CSS2 指出背景僅延伸到填充，而不延伸到邊框。 後來進行了更正：元素的背景是內容、填充和邊框區域的背景。 大多數瀏覽器都遵循該定義，儘管一些較舊的瀏覽器的行為可能有所不同。

也就是說，背景包括內容的寬度，左邊邊距和右邊邊距的寬度，邊框的寬度，左邊框和右邊框，你的**計算結果是50+50+50=150

什麼是藍色塊？

應該是樹！ 這個 div 的寬度變為 150px，高度為 300px。 占用的位置是填充加邊距、寬度加寬度和邊框，等於占用的總面積。

也就是說，框的寬度 = 填充 + 邊距 + 寬度 + 邊框

定義和用法。

padding shorthand 屬性在乙個宣告中設定所有填充屬性。

說明。 此速記屬性設定元素的所有填充的寬度，或每側填充的寬度。 在行中非替換元素上設定的填充不會影響行高計算;

因此，如果乙個元素同時具有填充和背景，它可能會在視覺上擴充套件到其他行，並可能與其他內容重疊。 元素的背景通過填充延伸。 不允許指定負邊距值。

如果只想讓樹和周圍元素生成示例，請使用外邊緣

乙個盒子的實際總寬度=寬度+邊框+填充，所以你加上填充：50px和50畫素，50+50+50當然是150px，但這種情況在IE中是不存在的。

vue practice - CSS樣式位置顯示浮點屬性比較使用。

您可以嘗試使用保證金。 如果資料很大，填充會溢位，如果必須使用填充，不妨先計算大小。

首先，嘗試在可以使用保證金的時候使用保證金（例如，當你不需要它時）;

如果必須使用填充，請盡量不要為寬度和高度設定乙個固定的值，可以設定為百分比或不設定，並取預設值（塊級元素預設寬度為100%，高度為0或內容的實際高度），這樣元素的整體大小不會改變;

如果必須指定寬度和高度的固定值，可以從該值中減去填充值，但需要注意的是，填充分為上、下、左、右，所以寬度應該減去左右填充的總和，高度應該減去上下填充的總和。

同樣重要的是要注意，元素的邊框也會占用元素的實際寬度，因此，如果要保持元素的整體大小相同，還應該考慮邊框，類似於填充。

下面列出了元素的實際大小，您可以通過自己研究來了解原因

元素的實際寬度 = 元素的寬度 + 左右填充 + 左右邊框

元素的實際高度 = 元素的高度 + 上下填充 + 上下邊框