元素宽度是否包括填充？答案

【问题标题】：Does element width include padding?元素宽度是否包括填充？
【发布时间】：2011-06-09 13:01:23
【问题描述】：

似乎在 Internet Explorer (IE) 中宽度包含填充，而在 Firefox (FF) 中则不包含。

我怎样才能使两者的行为相同？

【问题讨论】：

您可能需要激活标准兼容模式。但是，在没有看到一些代码的情况下，我无法为您提供更多指导。

标签： css

【解决方案1】：

IE 过去使用更方便但非标准的 "border-box" 框模型。在这个模型中，元素的宽度包括内边距和边框。例如：
#foo { width: 10em; padding: 2em; border: 1em; }
将是10em 宽。
相比之下，所有不遵守标准的浏览器都默认使用 "content-box" 框模型。在此模型中，元素的宽度不包括内边距或边框。例如：
#foo { width: 10em; padding: 2em; border: 1em; }
实际上将是16em 宽：10em + 2em 每边填充，+ 1em 每边边框。

如果您使用带有valid markup、good doctype 和appropriate headers 的现代版IE，它将遵守标准。否则，您可以通过以下方式强制符合现代标准的浏览器使用“边框框”：

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

Opera需要第一个声明，Firefox需要第二个，Webkit和Chrome需要第三个。

这是我多年前进行的一个简单测试，用于测试您的浏览器支持的 box-sizing 声明：http://phrogz.net/CSS/boxsizing.html

请注意，Webkit（Safari 和 Chrome）不通过任何声明支持 padding-box 框模型。

【讨论】：

+1 用于提及内容框和边框模型。不过可能想详细说明差异。
@BoltClock 感谢您给予更严格回答的动力。已更新。
不错的答案；几天来，我一直在努力记住（或找到）不同选项的名称...+1 =)
@whitelettersinblankpapers 查看why W3Schools sucks，然后查看a far better reference，这将引导您访问the W3C standard。不要再点击任何指向 W3Schools 的链接。此外，将来在您的搜索引擎查询中添加“MDN”关于网络标准。
截至 2021 年，除了 0.23% 的浏览器 - caniuse.com/css3-boxsizing，前缀与所有浏览器无关。

【解决方案2】：

一个简单的规则是尽量避免对同一元素使用 padding/margin 和 width 属性。即使用类似的东西

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

【讨论】：

我经常使用这种方法，从来没有跨浏览器的问题。

【解决方案3】：

我碰到了这个问题，尽管它已经有几年了，但我想我可能会添加这个以防有人碰到这个线程。

CSS3 现在有一个 box-sizing 属性。如果你设置，说，

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

您的班级将是 1000 像素宽，而不是 1030 像素。当然，这对于任何使用像素大小的边界和液体 div 的人来说非常有用，因为它解决了原本无法解决的问题。

更好的是，除 IE7 及以下版本外，所有主流浏览器都支持 box-sizing。要包含宽度或高度维度内的所有项目，请将 box-sizing 设置为 border-box。要将其他项目聚合到默认的宽度和/或高度，您可以将 box-sizing 设置为“content-box”。

我不确定浏览器语法的当前状态，但我仍然包含 -moz 和 -webkit 前缀：

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

【讨论】：

是的，Paul Irish 在这里有一篇很好的博客文章：paulirish.com/2012/box-sizing-border-box-ftw
当这个答案与 3 年前被接受的答案相同时，怎么会有这么多赞成？

【解决方案4】：

你声明了一个文档类型吗？当我开始编写 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>

【讨论】：

【解决方案5】：

对于那些仍然有问题的人，jQuery 提供了两个属性outerWidth () 和innerWitdh () 来了解有无边框对象的width .. .

【讨论】：