CSS：填充与高度

Question

在使用 CSS 设置样式时，我注意到填充属性可以轻松实现与高度属性相同的效果...但是填充属性使我的文字保持美观和居中，而高度属性迫使我添加其他 CSS 规则/调整行高。

是否 "wrong" 或违反常用的 CSS 标准来放弃高度属性并使用填充代替元素的高度？

这会带来什么影响？

Answer 1

是的，用padding来控制元素高度是错误的

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

Answer 2

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

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

PRO: 当您不希望容器垂直拉伸时很有用。
CON: 当您更改字体大小、边距、填充等属性时变得脆弱。
- 增加尺寸会导致内容隐藏或溢出。
- 例如，更改字体大小会导致级联更改（您还必须更改 margins/padding 或 sibling/child 元素的大小属性。

不需要固定容器高度，但又想加白的时候使用paddingspace.

PRO：更容易更改字体大小、边距、填充，并向容器添加可能会增加容器垂直尺寸的额外内容。
CON: 添加content/increasing尺寸属性会导致容器垂直拉伸，这在某些场景下是不可取的。
- 不适用于垂直space受限或需要控制的场景。

将最小高度和最大高度用于混合方法。

PRO：强制固定高度，但允许内容动态增长，直到达到最小或最大。
CON：您仍然遇到 "cascade" 大小属性更新问题，一旦达到最小值或最大值就添加内容。

Answer 3

您可以使用 box-sizing 属性:

By default, the width and height of an element is calculated like this:

Width + Padding + Border = Actual width of an element

Height + Padding + Border = Actual height of an element

这意味着：元素的边框和填充被添加到元素的指定 width/height。

使用 box-sizing 属性将允许您将元素填充和边框作为其总高度和宽度的一部分。

当您设置 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>

CSS：填充与高度

CSS: Padding vs. Height

css

syntax

standards

styling