html - 在 parent 的宽度内获取填充和边距

Question

我的网络有一个基本问题让我抓狂。

假设我有一个容器 div，我将其设置为 max-width 1024 px。然后我在里面还有两个 div，每个都是 width:50%。我尝试向内部 div 添加一个 padding，但随后它溢出到容器 div 的 1024 max-width 像素之上。

我的疑问是，如果 padding 像内边距一样，它们是元素的一部分，难道不应该将其计入那 50% width?换句话说，我希望元素 + padding 为 50%，而不仅仅是元素。

只是为了让事情更清楚，

现在是这样的:

... 这就是它的外观。 :

那么，我该怎么办呢？

Answer 1

盒子模型是这样的:

总宽度 = width + padding + border

如果您有 1000 像素的宽度 + 10 像素的填充，则总宽度为 1020 像素。

要避免这种情况，您可以使用此属性:

 box-sizing: border-box;

更多信息:

https://developer.mozilla.org/es/docs/Web/CSS/box-sizing