Html 为什么盒子尺寸对桌子和div的作用不同？

以下是HTML：

外分区
内分区，10px边距。
内部分区，10px填充。
相同，框大小：边框框
内桌，10px填充

在我的Chrome中看起来是这样的：

我想直到最后一次我都明白了。我的Chrome inspector显示表的计算

框大小

样式是

内容框

，因此我希望它的行为类似于第二个div，并且溢出，看起来很难看。为什么不同？这在HTML/CSS规范中有记录吗？

这就是

元素的工作原理。这些图元不是块级图元

它包含给定宽度内的填充，就像其他块级元素上的
框大小：边框框
一样

仅供参考，我在任何地方都找不到该文档。
是的，CSS2.1对包含以下内容的表格进行了说明：

但是，在HTML和XHTML1中，元素的宽度是从左边框边缘到右边框边缘的距离

注意：在CSS3中，将根据UA样式表规则和“框大小”属性定义此特殊要求

当前的CSS3定义对此没有任何说明，但将上面的引语翻译为（X）HTML中的基本意思是，表使用边框框模型：填充和边框不会添加到表的指定宽度

请注意，在
框大小调整属性方面，不同的浏览器处理这种特殊情况的方式似乎有所不同：


Chrome

框大小
设置为初始值，
内容框
；改变它没有任何效果。在内联样式中重新定义
框大小：内容框
，这也是意料之中的。无论哪种方式，Chrome似乎都在强制表格始终使用边框框模型


IE

框大小
设置为
边框框
；将其更改为
内容框
会使其行为类似于第二个
div


Firefox

-moz框大小
设置为
边框框
；将其更改为
内容框
或
填充框
会使其相应调整大小



由于CSS3还没有提到桌上盒子的尺寸，所以这并不令人惊讶。至少，结果是一样的——只是底层实现不同。但是考虑到上面的说明，我想说IE和Firefox更接近预期的CSS3定义，因为在Chrome中，似乎无法使用
框大小属性更改表的框模型


具有的表根本并没有填充，尽管在本例中，由于您的表不使用此模型，所以它不相关：

请注意，在此模型中，表格的宽度包括表格边框的一半。此外，在此模型中，表没有填充（但有边距）

这是因为
div
是块元素。尝试添加
显示：块到内部表。它将显示与div相同的内容。@Bram Vanroy:1）就在那时。2） 这个问题的全部要点是问为什么一张桌子的行为会与一块不同；将表更改为块将实现什么？@BoltClock您误解了我的评论（因此，它是一条评论）。我只是简单地解释了为什么会出现这种差异。我没有试图回答这个问题；反正我也没有把它作为答案贴出来。
<div style='width:300px;border:1px solid green'>
  <div>Outer div</div>
  <div style='width:100%;border:1px solid red;margin:10px;'>
    Inner div, 10px margin.
  </div>
  <div style='width:100%;border:1px solid red;padding:10px;'>
    Inner div, 10px padding.
  </div>
  <div style='width:100%;border:1px solid red;padding:10px;box-sizing:border-box'>
    Same, with box-sizing: border-box
  </div>
  <table style='width:100%;border:1px solid red;padding:10px;'>
    <tr><td>Inner table, 10px padding</td></tr>
  </table>
</div>