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

Question

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

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

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

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

Answer 1

这是框模型的默认行为。您可以进一步了解盒模型here。

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

box-sizing:border-box;

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