Question

我有一个div，我想指定一个FIXED宽度和高度，还有一个填充，可以在不降低原始DIV宽度/高度或增加它的情况下进行更改，是否有CSS技巧或替代方案使用填充？

Answer 1

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

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

可以在不使用其他包装器的情况下实现此解决方案

Answer 2

解决方案是用固定宽度外部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 3

听起来你正在寻找模拟IE6盒子模型。您可以使用CSS 3属性box-sizing: border-box来实现此目的。 IE8支持此功能，但对于Firefox，您需要使用-moz-box-sizing，对于Safari / Chrome，请使用-webkit-box-sizing。

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

Answer 4

尝试这个技巧

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

这将强制浏览器根据div的＆＃34;外部＆＃34; -width来计算宽度，这意味着将从宽度中减去填充。

Answer 5

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

Answer 6

如果边框框不起作用，您可以尝试在正在扩展的一侧添加带有填充的负边距。因此，如果您的容器被推到右侧，您可以这样做。

.classname{
  padding: 8px;
  margin-right: -8px;
}

如何在不影响宽度/高度的情况下更改DIV填充？

6 个答案: