当填充大于定义的大小时会发生什么？答案

【问题标题】：What happens when the padding is bigger than the defined size?当填充大于定义的大小时会发生什么？
【发布时间】：2022-01-21 03:29:48
【问题描述】：

<html>
<head>
<style>
* {
  box-sizing: border-box;
}
div {
  width: 10px;
  padding: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>

</body>
</html>

我试过了，但不明白结果。当 padding 大于给定宽度时，究竟会发生什么？

【问题讨论】：

标签： html css width padding

【解决方案1】：

您的元素的宽度将等于70px*2 + 1px*2 = 142px。填充和边框的总和大于指定的宽度，所以就像您的宽度等于 0 并且只有填充/边框定义了 final 宽度

也就是说，元素上指定的任何内边距或边框都会在指定的宽度和高度内进行布局和绘制。内容的宽度和高度是通过从指定的宽度和高度属性中减去相应边的边框和填充宽度来计算的。由于内容的宽度和高度不能为负数（[CSS2]，第 10.2 节），此计算的下限为 0 ^ref

您可以清楚地看到为什么 content 宽度最终会等于 0，而 final 宽度只是填充和边框。

要使用数学来表达这一点，您有以下公式：

content-width + padding + border = final-width

和

content-width = max(0,specified-width - (padding + border))

我用max()来表达我们只取正值的事实。

计算一下，你会得到142px

如果specified-width - (padding + border)为正，你会得到specified-width = final-width的逻辑结果

【讨论】：

这是有道理的。但对我来说，内容宽度为 0 但内容最终具有宽度并存在，这对我来说似乎很奇怪。它也没有溢出（overflow: hidden 没有任何区别）
@anands 它在填充区域溢出并且溢出：隐藏不会隐藏填充区域。检查开发工具中的元素以注意到您只有填充

【解决方案2】：

我不是 100% 确定，但它可能只是下降到宽度的 100%。因此，如果您输入padding: 99999px;，它将向下舍入为padding: 100%

【讨论】：

不要padding: 100% 表示容器（父级）宽度的 100%？另外，盒子内的完整填充实际上是什么意思？内容会不会没有空间？在上面的示例中，即使填充明显大于总宽度，也可以在左下方区域附近看到文本。
No padding: 100% 使其占据网页高度和宽度的 100% 加上 100 不是 padding 的有效值，它需要附加一个单位。
我之前误按了“添加评论”。请检查，我已经编辑了之前的评论。我的意思是当填充大于给定宽度时会发生什么？在我之前尝试的示例中，根本不考虑给定的宽度，填充优先。是这样吗？ CSS 让我很困惑
当您执行padding: 100% 时，它会占用 100% 的父元素。对不起，我说的网页是我在测试之前认为的。