在使用CSS进行样式设计时,我注意到padding属性可以很容易地实现与height属性相同的效果...但是padding属性可以保持文本的美观和居中,而height属性则强制我添加其他CSS规则/调整行高。
是"错误"或者反对常用的CSS标准来抛弃高度属性并使用填充代替元素的高度?
这会带来什么影响?
答案 0 :(得分:9)
高度和填充都固有地控制元素的高度。我不得不反对使用填充是错误的,而是取决于具体的用例。
当您需要固定的容器尺寸时使用高度。
当您不需要固定的容器高度但想要添加空格时使用填充。
使用min-height和max-height进行混合方法。
答案 1 :(得分:6)
是的,使用填充来控制元素高度是错误的。
height
控制元素的实际高度(基本上是从border-bottom
到border-top
的距离),而padding
控制内容与边框之间的距离。
答案 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>