如何添加填充或边框到DIV，并保持宽度和高度？ [英] How to add padding or border to a DIV and keep width and height?

问题描述

有没有一些方法来保持一个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/

解决方案

是的，您可以使用

  -webkit-box-sizing：border-box; / * Safari / Chrome，其他WebKit * / 
 -moz-box-sizing：border-box; / * Firefox，other Gecko * / 
 box-sizing：border-box; / * Opera / IE 8+ * / 
  

更改框模型以使边框和内边距您的宽度/高度，但边距仍会添加。

和您更新的 Fiddle

更多信息 css技巧 p>

Is there some way to keep a set width/height for a DIV, and pad the content without the DIV growing? See example below. I want all the boxes to be exactly 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/

解决方案

Yes you can use

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

to change the box model to make borders and padding internal to your width/height, but margins are still added.

and your updated Fiddle

more information here css tricks

这篇关于如何添加填充或边框到DIV，并保持宽度和高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！