CSS：填充与高度

Question

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

是＆＃34;错误＆＃34;或者反对常用的CSS标准来抛弃高度属性并使用填充代替元素的高度？

这会带来什么影响？

Answer 1

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

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

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

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

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

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

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

Answer 2

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

height控制元素的实际高度（基本上是从border-bottom到border-top的距离），而padding控制内容与边框之间的距离。

Answer 3

您可以使用box-sizing属性：

  

默认情况下，元素的宽度和高度的计算方式如下   这个：

     

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

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

通过使用box-sizing属性，您可以将元素padding和border作为其总高度和宽度的一部分。

设置box-sizing: border-box;时，元素的边框和边框将作为元素的总宽度和高度的一部分。

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
}

<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>

---

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>