Html 表格单元格框模型：额外宽度和高度

这是表格单元格：

---

正如您在Chrome或Firefox中使用inspect元素功能时所看到的，表格单元格的总宽度和高度计算为105px×85px。然而，单元内容（图像）仅为64px×64px，单元填充为6px 10px 6px 10px。我在元素样式中看不到任何宽度和高度属性，那么这个额外的宽度和高度从何而来？

它是一个表格单元格，因此浏览器将自动在单元格之间分配空间以填充表格的宽度。确切的宽度取决于所有单元格的内容和表格的宽度。在本例中，表格设置为浏览器窗口的百分比宽度，因此在我的1920x1080显示器上，它实际上比您的屏幕截图中大了一点

---

高度仍然有点神秘，但可能是标记中存在空白的问题。如果将该单元格的

字体大小设置为
0
，图标下方的额外空间将消失。上下填充为6px，下边框为1px，总计13px。图像下方有一个锚定标记，高度为15px，锚定有一条规则：
行高：1.67
。锚定与图像重叠约9px，底部增加6px。因此64（图像）+6（非重叠锚定）+13（填充/边框）=83px。注意：当浏览器宽度改变时，单元格缩小/加宽。这意味着单元格的宽度被定义为表格的百分比（通过浏览器，不一定是谷歌），表格的宽度为（父项的）100%。