为什么用溢出来剪裁右侧填充:滚动

Question

在下面的代码段中，当内容开始在小视口中溢出时，.ctr的padding-right不可见。

我读过其他答案，我知道如何解决它。我只需要将padding:20px从.ctr移动到.row。或者只需将margin-right:20px添加到最后一个子项。

但是，我找不到发生这种情况的原因。有人能解释一下发生了什么事吗？任何进一步学习的资源都将受到高度赞赏🙏

谢谢！

.ctr {
display: flex;
overflow-x: auto;
padding: 20px;
}
.row {
margin: 0 auto;
display: flex;
}
.child {
margin-right: 20px;
width: 600px;
height: 100px;
background: red;
}
.child:last-child {
margin-right: 0;
}

<div class="ctr">
<div class="row">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>

Answer 1

当内容溢出时，填充实际上就在那里，它会隐藏它。

我们可以用background和background-origin来说明这一点

.container {
display: flex;
overflow-x: auto;
padding: 20px;
width: 200px;
background: linear-gradient(red, red) no-repeat;
background-origin: content-box;
border: 1px solid;
}
.overflow {
background: pink;
min-width: 400px;
height: 100px;
border: 1px solid;
}

<div class="container">
<div class="overflow"></div>
</div>
the white space you see on the edges is the padding

background-origin: content-box;使背景排除边界和填充，这将向我们表明填充不是仅被覆盖的，这是因为填充是父对象的一部分，内容溢出父对象，因此它覆盖了它。

这没什么特别的。

Answer 2

Dude原因是浏览器中的rendering or calculation(或者我们开发的逻辑或系统从top/left开始，到right/bottom结束(。因此，填充放置的层次结构是：

margin > border > padding > content

(记住它从上/左开始(。

现在你看到的问题只是因为你没有增加物品的高度。如果你这样做，你不仅会在right-padding上发现问题，还会在bottom-padding上发现问题。

Padding只是一种包装柔性事物的努力。当你给物品一个600*5的宽度时，它们的宽度就会比可用的宽度大。

padding并不像margin那样是有力的竞争者。因为，在同一个元素上为apply加上边距，该元素的宽度或高度是您正在操纵的。padding正在应用于一个元素，该元素试图对其他元素施加限制(通常是直接子元素(。因此，这就是padding和margin之间的区别，以及它们如何通过Box-Model应用于browsers。

希望，这澄清了一点。