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：

边界框

宽度和高度属性包括内容，填充和边框，但不包括边距。