CSS:填充与高度

Question

在使用CSS进行样式化时,我注意到padding属性可以很容易地实现与height属性相同的效果...但是padding属性使我的文本保持良好和居中,而height属性则强制我添加其他CSS规则/调整线高.

它是"错误的"还是反对常用的CSS标准来抛弃高度属性并使用填充代替元素的高度？

这会带来什么影响？

Answer 1

高度和填充都固有地控制元素的高度.我不得不反对使用填充是错误的,而是取决于具体的用例.

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

• PRO:当您不希望容器垂直拉伸时有用.
• CON:当您更改字体大小,边距,填充等属性时会变脆.
  • 增加大小会导致内容隐藏或溢出.
  • 例如,更改字体大小可能会导致级联更改(您还必须更改兄弟/子元素的边距/填充或大小属性.

当您不需要固定的容器高度但想要添加空格时使用填充.

• PRO:更容易更改字体大小,边距,填充以及向容器添加可能增加容器垂直大小的其他内容.
• CON:添加内容/增加大小属性将导致容器垂直拉伸,这在某些情况下是不可取的.
  • 不适用于垂直空间有限或需要控制的情况.

使用min-height和max-height进行混合方法.

• PRO:强制固定高度,但允许内容动态增长,直到达到最小值或最大值.
• CON:一旦达到最小值或最大值,您仍然会遇到尺寸属性和添加内容的"级联"更新问题.

Answer 2

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

height控制元件(基本上从距离的实际高度border-bottom到border-top),而padding控制内容和所述边界之间的距离.