如何更改DIV填充而不影响宽度/高度？

我有一个div，我想指定一个固定的宽度和高度，也可以改变一个填充，而不减less原来的DIV宽度/高度或增加它，有CSS技巧，或者使用填充替代？

Answer 1

解决方法是用固定宽度的外部div来包装您的填充 div

HTML

<div class="outer"> <div class="inner"> <!-- your content --> </div><!-- end .inner --> </div><!-- end .outer --> 

CSS

 .outer, .inner { display: block; } .outer { /* specify fixed width */ width: 300px; padding: 0; } .inner { /* specify padding, can be changed while remaining fixed width of .outer */ padding: 5px; } 

Answer 2

声明这在你的CSS，你应该是好的：

 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

这个解决scheme可以在不使用其他包装的情况下实现

Answer 3

听起来就像你正在模拟IE6盒模型。 您可以使用CSS 3属性框大小：边框来实现这一点。 这是由IE8支持的，但对于Firefox，您需要使用-moz-box-sizing ，对于Safari / Chrome，请使用-webkit-box-sizing 。

IE6已经计算出高度错误，所以你在这个浏览器中是好的，但我不确定IE7，我认为它会计算高度在怪癖模式相同。

Answer 4

为了实现跨浏览器的一致结果，通常会在div添加另一个div ，并且不给出明确的宽度和margin 。 margin将模拟外部div的padding 。

Answer 5

试试这个技巧

 div{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

这将迫使浏览器根据div的“outer”-width计算宽度，这意味着填充将从宽度中减去。