Html 如何在不影响宽度/高度的情况下更改 DIV 填充？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2225585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change a DIV padding without affecting the width/height ?
提问by Ryan
I have a div that I want to specify a FIXED width and height for, and also a padding which can be changed without decreasing the original DIV width/height or increasing it, is there a CSS trick for that, or an alternative using padding?
我有一个 div，我想为其指定一个固定的宽度和高度，还有一个可以在不减少原始 DIV 宽度/高度或增加它的情况下更改的填充，是否有 CSS 技巧，或者使用填充的替代方法？
采纳答案by Juraj Blahunka
Solution is to wrap your padded div, with fixed width outer div
解决方案是用固定宽度的外部 div包裹你的填充div
HTML
HTML
<div class="outer">
<div class="inner">
<!-- your content -->
</div><!-- end .inner -->
</div><!-- end .outer -->
CSS
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;
}
回答by adswebwork
Declare this in your CSS and you should be good:
在你的 CSS 中声明这个，你应该很好：
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
This solution can be implemented without using additional wrappers.
该解决方案可以在不使用额外包装器的情况下实现。
This will force the browser to calculate the width according to the "outer"-width of the div, it means the padding will be subtracted from the width.
这将强制浏览器根据 div 的“外部”宽度计算宽度，这意味着将从宽度中减去填充。
回答by wsanville
Sounds like you're looking to simulate the IE6 box model. You could use the CSS 3 property box-sizing: border-boxto achieve this. This is supported by IE8, but for Firefox you would need to use -moz-box-sizingand for Safari/Chrome, use -webkit-box-sizing.
听起来您正在寻找模拟 IE6 盒模型。您可以使用 CSS 3 属性box-sizing: border-box来实现这一点。IE8 支持此功能，但对于 Firefox，您需要使用-moz-box-sizingSafari/Chrome，请使用-webkit-box-sizing.
IE6 already computes the height wrong, so you're good in that browser, but I'm not sure about IE7, I think it will compute the height the same in quirks mode.
IE6 已经计算出错误的高度，所以你在那个浏览器中很好，但我不确定 IE7，我认为它会在 quirks 模式下计算相同的高度。
回答by K.A
try this trick
试试这个技巧
div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
this will force the browser to calculate the width acording to the "outer"-width of the div, it means the padding will be substracted from the width.
这将强制浏览器根据 div 的“外部”宽度计算宽度，这意味着将从宽度中减去填充。
回答by Pekka
To achieve a consistent result cross browser, you would usually add another divinside the divand give that no explicit width, and a margin. The marginwill simulate paddingfor the outer div.
为了在跨浏览器中获得一致的结果，您通常会在div里面添加另一个div并且没有明确的宽度，并且一个margin. 在margin将模拟padding的外层div。
