CSS:填充与高度

时间:2015-02-24 04:36:51

标签: css syntax standards styling

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

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

这会带来什么影响?

3 个答案:

答案 0 :(得分:9)

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

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

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

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

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

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

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

答案 1 :(得分:6)

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

height控制元素的实际高度(基本上是从border-bottomborder-top的距离),而padding控制内容与边框之间的距离。

Spacing of html element

答案 2 :(得分:0)

您可以使用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>