是否有某种方法可以为 DIV 保持设置的宽度/高度,并在 DIV 不增长的情况下填充内容?请参见下面的示例。我希望所有的框都是 140x140。
HTML:
<div class="box1">Howdy.</div>
<div class="box2">Howdy.</div>
<div class="box3">Howdy.</div>
CSS:
.box1 {
width: 140px;
height: 140px;
background: #f66;
}
.box2 {
width: 140px;
height: 140px;
background: #66f;
padding: 1em;
}
.box3 {
width: 140px;
height: 140px;
background: #6f6;
border: 1em solid #000;
}
fiddle :http://jsfiddle.net/Wrc5S/
最佳答案
是的,你可以使用
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
更改盒子模型,使边框和填充在您的宽度/高度内,但仍会添加边距。
和你更新的Fiddle
更多信息在这里css tricks
关于css - 如何向 DIV 添加填充或边框并保持宽度和高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9675478/