填充增加盒子元素的总大小

Question

这是通过填充来增加盒子元素的总大小的正确行为吗？我正在尝试将填充设置到宽度设置为 940px 的框元素的左侧，但是当我在左侧添加 25px 的填充时，它会将这些像素添加到框元素的宽度中，使其与主体重叠 -作为父元素的包装器。

我也尝试了 marging-left ，但是虽然这不会增加我的盒子元素的总宽度，但它会将它推到右侧导致它也重叠..

处理此问题的最佳方法是什么？

请查看屏幕截图以获取视觉效果：

Answer 1

这是盒子模型的默认行为。您可以了解更多关于盒子模型here。

在您的 CSS 中，您可以使用 box-sizing 属性定义行为。在这种情况下，您需要：

box-sizing:border-box;

border-box 在设置元素的width 时会考虑填充和边框大小，这就是您要查找的内容。但是，它不会根据边距大小进行计算。