CSS：填充与高度

在使用CSS设计样式时，我注意到padding属性可以轻松实现与height属性相同的效果。。。但是padding属性使我的文本保持整洁和居中，而height属性迫使我添加其他CSS规则/调整行高

放弃height属性而使用padding作为元素的高度，这是“错误的”还是违背了常用的CSS标准

---

这可能会带来什么影响？

是的，使用填充来控制元素高度是错误的

高度

控制元素的实际高度（基本上是从

边框底部

到

边框顶部

的距离），而

填充

控制内容和边框之间的距离

---

高度和填充都固有地控制元素的高度。我不同意使用填充是错误的，而是取决于具体的用例

需要固定容器尺寸时使用高度。

• PRO：在不希望容器垂直拉伸时非常有用
• 缺点：当你改变字体大小、边距、填充等属性时，就会变得脆弱。
  • 增大大小可能会导致内容隐藏或溢出
  • 例如，更改字体大小可能会导致级联更改（您还必须更改同级/子元素的边距/填充或大小属性）

如果不需要固定的容器高度，但希望添加空白，请使用填充。

• 优点：更容易更改字体大小、边距、填充，并向容器中添加可能增加容器垂直大小的其他内容
• 缺点：添加内容/增加大小属性将导致容器垂直拉伸，这在某些情况下是不可取的。
  • 不适用于垂直空间有限或需要控制的场景

混合进近使用最小高度和最大高度。

• 赞成：强制固定高度，但允许内容动态增长，直到达到最小值或最大值
• 缺点：当你达到最小值或最大值时，你仍然存在大小属性和添加内容的“级联”更新问题

---

您可以使用

框大小属性：

默认情况下，元素的宽度和高度计算如下
此：


宽度+填充+边框=元素的实际宽度
高度+填充+边框=元素的实际高度

这意味着：元素的边框和填充将添加到元素的指定宽度/高度

使用
框大小调整
属性可以将元素填充和边框作为其总高度和宽度的一部分

设置
框大小：边框框；
元素的填充和边框将作为其总宽度和高度的一部分


.div1{
宽度：300px；
高度：100px；
边框：1px纯蓝色；
}
.第2分部{
宽度：300px；
高度：100px；
填充：50px；
边框：1px纯红；
}
此div较小（宽度为300px，高度为100px）。


这个div更大（宽度也是300px，高度是100px）。