当填充大于定义的尺寸时会发生什么？
<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>
我尝试了这个，但不明白结果。当填充大于给定宽度时，到底会发生什么？
<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>
I tried this but don't understand the result. What exactly happens when the padding is bigger than the given width?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的元素的宽度等于
70px*2 + 1px*2 = 142px。填充和边框的总和大于指定的宽度，因此就像您的宽度等于0，并且只有填充/边框定义 final 宽度您可以清楚地看到为什么 content 宽度将等于0，最终宽度仅是填充和边框。
为了使用数学表达这一点，您有以下公式：
我
正在使用
max（）来表达我们仅占据正值的事实。进行计算，您将获得
142px如果
指定的宽度 - （Padding + Border）是正面的，您将获得指定宽度=最终的逻辑结果-WidthYour element will have a width equal to
70px*2 + 1px*2 = 142px. The sum of the padding and border is bigger than the specified width so it's like you have width equal to 0 and only the padding/border are defining the final widthYou can clearly see why the content width will end being equal to 0 and the final width is only the padding and border.
To express this using math, you have the following formula:
And
I am using
max()to express the fact that we take only positive value.Do the calculation and you will get
142pxIf
specified-width - (padding + border)is positive, you will get the logical result ofspecified-width = final-width