2

Here's the table cell: https://developers.google.com/+/web/share/#sharelink-sizes

Table cell screenshot

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Mori
  • 8,137
  • 19
  • 63
  • 91
  • Note: the cells shrink/widen when browser width changes. Meaning that the cells' width is defined as a percentage of the table (by the browser, not necessarily Google), which has `width:100%` (of its parent). – Trojan Oct 31 '13 at 04:19

1 Answers1

2

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.

enter image description here

Chris Herbert
  • 6,145
  • 3
  • 19
  • 31
  • The height is still a little mysterious though – Jason Sperske Oct 31 '13 at 04:18
  • 2
    It's probably an issue with white space in the markup. If you set the `font-size` for that cell to `0`, the extra space below the icon disappears. – Chris Herbert Oct 31 '13 at 04:23
  • The top-bottom padding is 6px, and the bottom border is 1px, totaling 13px. There's an anchor tag below the image with height 15px, and the anchor has a rule: `line-height:1.67`. The anchor has about 9px overlapping with the image, adding 6px to the bottom. So 64 (image) + 6 (un-overlapped anchor) + 13 (padding/border) = 83px. – Trojan Oct 31 '13 at 04:29