表格单元格框模型：额外的宽度和高度 [英] Table cell box model: extra width and height

问题描述

以下是表格单元格： https://developers.google.com / + / web / share /＃sharelink-sizes

正如您在Chrome或Firefox中使用 inspect元素功能时所看到的，表格单元格的高度计算为105px×85px。但是，单元格内容（图片）只有64px x 64像素，单元格填充为6px 10px 6px 10px。我在元素样式中没有看到任何width和height属性，因此这个额外的宽度和高度来自哪里？

As you see when you use the inspect element feature in Chrome or Firefox, the total width and height of the table cell is calculated as 105px × 85px. However, the cell content (image) is only 64px × 64px and the cell padding is 6px 10px 6px 10px. I don't see any width and height properties in the element style, so where does this extra width and height come from?

推荐答案

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

It's a table cell, so the browser will automatically distribute space among the cells to fill the width of the table. The exact width will depend upon the contents of all the cells and the width of the table. In this case, the table is set as a percentage width of the browser window, so on my 1920x1080 monitor, it's actually quite a bit bigger than in your screenshot.

< img src =https://i.stack.imgur.com/1qBfQ.pngalt =输入图片说明here>>

这篇关于表格单元格框模型：额外的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！