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

93

我有一个div，我想为其指定FIXED宽度和高度，以及一个可以更改的填充，而无需减小原始DIV宽度/高度或增加它，是否有CSS技巧或使用填充来替代？

css html

— 瑞安
source

72

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

— 尤拉·布拉洪卡（Juraj Blahunka）
source

我不确定，只是想澄清一下，但这仅适用于水平填充，对吗？高度：自动不会像宽度一样填充父级：自动。

— 乔纳森·阿苏莱

196

在CSS中声明这一点，您应该会做得很好：

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

无需使用其他包装即可实现此解决方案。

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

— adswebwork
source

它像魅力一样工作，我是新手，只需搜索此属性，它就可以了

— 。Great

1

使用时是否应注意任何副作用？

— Radi

15

此解决方案优于公认的解决方案，并且不再使用前缀是安全的：shouldiprefix.com/#box-sizing

— fgblomqvist

@adswebwork您节省了我的大量时间。谢谢。

— Hardik Chaudhary

17

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

IE6已经计算出错误的高度，因此您在该浏览器中表现不错，但是我不确定IE7，我认为它会在怪癖模式下计算高度。

— 桑维尔
source

css3仍然像iPad一样非常新：)

— Ryan

9

试试这个技巧

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

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

— K A
source

5

这与@adswebwork的答案相同，对吗？我很欣赏它的工作原理的解释，但作为注释可能会更好

— craq 2015年

1

为什么要发布相同的答案

— 安德鲁

4

为了div在整个浏览器中获得一致的结果，通常会在中添加另一个，div并且不给它明确的宽度，然后添加一个margin。在margin将模拟padding的外层div。

— 佩卡
source