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

Question

<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>

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

Answer 1

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

That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified width and height properties. As the content width and height cannot be negative ([CSS2], section 10.2), this computation is floored at 0 ^ref

你可以清楚地看到为什么content宽度最终会等于0而final宽度只是padding和border。

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

content-width + padding + border = final-width

和

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

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

计算得到142px

如果specified-width - (padding + border)为正，您将得到specified-width = final-width

的逻辑结果

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

What happens when the padding is bigger than the defined size?

html

css

padding

width