Модель коробки с ячейками таблицы: дополнительная ширина и высота

Вот ячейка таблицы: https://developers.google.com/+/web/share/#sharelink-sizes

Снимок экрана ячейки таблицы

Как вы видите, когда вы используете функцию проверить элемент в Chrome или Firefox, общая ширина и высота ячейки таблицы рассчитывается как 105 пикселей × 85 пикселей. Однако содержимое ячейки (изображение) составляет всего 64 пикселя × 64 пикселя, а заполнение ячейки — 6 пикселов 10 пикселов 6 пикселов 10 пикселов. Я не вижу никаких свойств ширины и высоты в стиле элемента, так откуда же взялась эта дополнительная ширина и высота?


html css css-tables
person Mori    schedule 31.10.2013    source источник
comment
Примечание: ячейки сжимаются/расширяются при изменении ширины браузера. Это означает, что ширина ячеек определяется в процентах от таблицы (браузером, не обязательно Google), которая имеет width:100% (от ее родителя).   -  person Trojan    schedule 31.10.2013

Ответы (1)


arrow_upward
2
arrow_downward

Это ячейка таблицы, поэтому браузер автоматически распределяет пространство между ячейками, чтобы заполнить всю ширину таблицы. Точная ширина будет зависеть от содержимого всех ячеек и ширины таблицы. В этом случае таблица задается в процентах от ширины окна браузера, поэтому на моем мониторе 1920x1080 она на самом деле немного больше, чем на вашем скриншоте.

введите здесь описание изображения

person Chris Herbert    schedule 31.10.2013
comment
Высота все еще немного загадочна, хотя - person Jason Sperske; 31.10.2013
comment
Вероятно, проблема с пробелами в разметке. Если вы установите font-size для этой ячейки на 0, дополнительное пространство под значком исчезнет. - person Chris Herbert; 31.10.2013
comment
Отступ сверху и снизу составляет 6 пикселей, а нижняя граница — 1 пиксель, всего 13 пикселей. Под изображением есть тег привязки высотой 15 пикселей, и у привязки есть правило: line-height:1.67. Якорь примерно на 9 пикселей перекрывается с изображением, добавляя 6 пикселей к низу. Таким образом, 64 (изображение) + 6 (анкор без перекрытия) + 13 (отступ/граница) = 83 пикселя. - person Trojan; 31.10.2013