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

【问题标题】：Table cell box model: extra width and height表格单元格模型：额外的宽度和高度
【发布时间】：2013-10-31 04:14:58
【问题描述】：

这是表格单元格：https://developers.google.com/+/web/share/#sharelink-sizes

正如您在 Chrome 或 Firefox 中使用 inspect element 功能时看到的，表格单元格的总宽度和高度计算为 105px × 85px。但是，单元格内容（图像）只有 64px × 64px，单元格内边距为 6px 10px 6px 10px。我在元素样式中没有看到任何宽度和高度属性，那么这个额外的宽度和高度是从哪里来的呢？

【问题讨论】：

注意：当浏览器宽度改变时，单元格会缩小/变宽。这意味着单元格的宽度被定义为表格的百分比（由浏览器，不一定是谷歌），它有width:100%（它的父级）。

标签： html css css-tables

【解决方案1】：

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

【讨论】：

身高还是有点神秘
这可能是标记中的空白问题。如果您将该单元格的font-size 设置为0，则图标下方的多余空格将消失。
上下边距为6px，下边框为1px，共13px。图片下方有一个高度为15px的anchor标签，anchor有一条规则：line-height:1.67。锚点与图像有大约 9px 的重叠，底部增加了 6px。所以 64（图像）+ 6（未重叠的锚点）+ 13（填充/边框）= 83px。