HTML正確的div大小

Question

當它的父母的div width:100%，然後申請一個padding-right:5%;它，就好像我在div上做了width:105%;，並且這影響其他情況下在其旁邊浮動的其他div如width:70%; padding-right:2%; float:left

假設我們有這樣的代碼

<div style="width:100%; padding-right:3%;"> text </div>

這將創建一個水平滾動條Ø在頁面中，因爲現在基本上div的寬度已經超過了100％。我的問題是，如何正確設置div的大小？我是否必須從其width減去實際div的padding或什麼？這就是我現在正在做的工作，但我覺得這不是最好的方法。

Answer 1

只需添加box-sizing: border-box到元素的樣式：

<div style="width: 100%; padding-right: 3%; box-sizing: border-box;"> text </div>

根據MDN：

邊界框

寬度和高度屬性包括內容，填充和邊框，但不包括邊距。