如何为DIV添加填充或边框并保持宽度和高度？

Question

有没有办法保持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;
}

小提琴:http://jsfiddle.net/Wrc5S/

Answer 1

是的,你可以使用

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

更改框模型以在宽度/高度内部进行边框和填充,但仍会添加边距.

和你更新的小提琴

这里有更多信息css技巧