css – 如何添加填充或边框到DIV并保持宽度和高度?

前端之家收集整理的这篇文章主要介绍了css – 如何添加填充或边框到DIV并保持宽度和高度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法为DIV保留设置的宽度/高度,并且在不增加DIV的情况下填充内容?参见下面的例子.我想要所有的盒子正好是140×140.

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/

解决方法

是的,你可以使用
-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相关文章