CSS 宽度是否包括填充？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4698054/
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
CSS does the width include the padding?
提问by Jake
It seems that in IE, the width includes the padding size. while in FF, the width does not. How can I make both behave the same?
似乎在 IE 中，宽度包括填充大小。而在 FF 中，宽度则没有。我怎样才能让两者的行为相同？
Thanks.
谢谢。
回答by Phrogz
IE used to use the more-convenient-but-non-standard "border-box"box model. In this model, the width of an element includes the padding and borders. For example:
#foo { width: 10em; padding: 2em; border: 1em; }
would be10emwide.In contrast, all standards-fearing browsers default to the "content-box"box model. In this model, the width of an element does notinclude padding or borders. For example:
#foo { width: 10em; padding: 2em; border: 1em; }
will actually be16emwide:10em+2empadding for each side, +1emborder for each edge.
IE 曾经使用更方便但非标准的“边框框”框模型。在这个模型中，元素的宽度包括内边距和边框。例如：
#foo { width: 10em; padding: 2em; border: 1em; }
会很10em宽。相比之下，所有担心标准的浏览器默认为“内容框”框模型。在此模型中，元素的宽度不包括填充或边框。例如：
#foo { width: 10em; padding: 2em; border: 1em; }
实际上会16em很宽：每边10em+2em填充，每条边+1em边框。
If you use a modern version of IE with valid markup, a good doctype, and appropriate headersit will adhere to the standard. Otherwise, you can force modern standards-compliant browsers to use "border-box" via:
如果您使用具有有效标记、良好 doctype和适当标题的现代 IE 版本，它将符合标准。否则，您可以通过以下方式强制符合现代标准的浏览器使用“边框框”：
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
The first declaration is needed for Opera, the second is for Firefox, the third is for Webkit and Chrome.
Opera 需要第一个声明，Firefox 需要第二个声明，Webkit 和 Chrome 需要第三个声明。
Here's a simple test I made years ago for testing what box-sizing declaration your browser supports: http://phrogz.net/CSS/boxsizing.html
这是我多年前进行的一个简单测试，用于测试您的浏览器支持的 box-sizing 声明：http: //phrogz.net/CSS/boxsizing.html
Note that Webkit (Safari and Chrome) do not support the padding-boxbox model via any declaration.
请注意，Webkit（Safari 和 Chrome）不padding-box通过任何声明支持盒模型。
回答by shankhan
A simple rule is to try to avoid using padding/margin and width property for same element. i.e. Use something similar to this
一个简单的规则是尽量避免对同一元素使用 padding/margin 和 width 属性。即使用类似的东西
<div class="width-div">
<div class="padding-div">
...........
...........
</div>
</div>
回答by Mason Barge
I bumped into this question and even though it's a couple of years old, I thought I might add this in case anyone bumps into this thread.
我遇到了这个问题，尽管它已经有几年的历史了，但我想我可能会添加这个，以防有人碰到这个线程。
CSS3 now has a box-sizing property. If you set, say,
CSS3 现在有一个 box-sizing 属性。如果你设置，说，
.bigbox {
box-sizing: border-box;
width: 1000px;
border: 5px solid #333;
padding: 10px;
}
your class will be 1000px wide, instead of 1030px. This is, of course, incredibly useful for anyone who uses pixel-sized border with liquid divs, because it solves an otherwise insoluble problem.
您的类将是 1000 像素宽，而不是 1030 像素。当然，这对于使用带有液体 div 的像素大小边框的人来说非常有用，因为它解决了一个无法解决的问题。
Even better, box-sizing is supported by all major browsers except IE7 and below. To includeall items within the width or height dimension, set box-sizing to border-box. To aggregateother items to the width and/or height, which is the default, you can set box-sizing to "content-box".
更好的是，除 IE7 及更低版本外，所有主要浏览器都支持 box-sizing。要包含宽度或高度维度内的所有项目，请将 box-sizing 设置为 border-box。要将其他项目聚合到默认的宽度和/或高度，您可以将 box-sizing 设置为“content-box”。
I'm not sure of the current state of browser syntax, but I still include -moz and -webkit prefixes:
我不确定浏览器语法的当前状态，但我仍然包含 -moz 和 -webkit 前缀：
.bigbox{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
回答by Patrick
for those who would still have the problem, jQueryprovided two property outerWidth ()and innerWitdh ()to know the widthof an object with or without borders ...
对于那些仍然有问题的人，jQuery提供了两个属性，outerWidth ()并innerWitdh ()知道有或没有边框的对象的宽度......
回答by tybro0103
Do you have a doctype declared? When I started coding html I had this problem, and it was from not having a doctype declared. My favorite is:
你有声明的文档类型吗？当我开始编码 html 时，我遇到了这个问题，这是因为没有声明 doctype。我最喜欢的是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>
