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

Question

我有一个div,我想指定一个固定的宽度和高度,还有一个填充,可以改变而不减少原始的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的"外部"宽度计算宽度,这意味着填充将从宽度中减去.

Answer 5

为了在跨浏览器中获得一致的结果，您通常会div在 中添加另一个div，并且没有明确的宽度，并且margin. 将margin模拟padding外部 div。