При использовании строковой модели форматирования CSS высота ячейки таблицы будет 12 пикселов и изображение будет располагаться на базовой линии ячейки. Так что под изображением может оставаться просвет в 3 пиксела и в 8 над ним, хотя точные расстояния зависели бы от выбранного семейства шрифтов и размещения его базовой линии.


Такое поведение не ограничивается изображениями, находящимися в ячейках таблицы; это произойдет в любом случае, если замещаемый строковый элемент – единственный потомок блочного элемента или ячейки таблицы. Например, изображение внутри div также будет располагаться на базовой линии.

На момент написания данной книги многие броузеры фактически игнорируют эту строковую модель форматирования CSS, но броузеры компании Netscape Communications при формировнии визуального представления документов XHTML и строгого HTML действуют, как описывает текст. Проще всего в таких обстоятельствах сделать изображения разделители блочными элементами, чтобы они не генерировали контейнер строки. Например:

td {font-size: 12px;}
img.block {display: block;}

Еще можно задать свойствам font-size и line-height ячейки таблицы значения 1px, при этом высота контейнера строки будет соответствовать изображению в один пиксел, находящемуся в ней. Вот еще один интересный эффект от применения замещаемых строквых элементов, располагающихся на базовой линии: если задать отрицательное нижнее поле, элемент на самом деле будет сдвинут вниз, потому что низ его строкового блока будет располагаться выше, чем низ его области содержимого.


Таким образом, применение следующего правила дало бы результат:

p img {margin-bottom: -10px;}

Это может запросто привести к перетеканию замещаемых элементов на следующие строки текста. Некоторые броузеры просто размещают область содержимого на базовой линии и игнорируют отрицательные значения нижнего поля.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание



Замещаемые элементы и базовая линия

К этому времени вы, возможно, заметили, что по умолчанию замещаемые строковые элементы располагаются на базовой линии. Если добавить в замещаемый элемент отступ снизу, поле или рамку, область содержимого переместится вверх. На самом деле у замещаемых элементов нет собственных базовых линий, так что лучше всего выровнять низ их строковых блоков по базовой линии. Таким образом, по базовой линии выравнивается нижний внешний край поля. Это выравнивание по базовой линии приводит к неожиданным (и нежелательным) последствиям: изображение, помещенное в ячейку таблицы, само по себе должно сделать ячейку достаточно высокой, чтобы вместить содержащий изображение контейнер строки. Размер изменяется, даже если в ячейке с изображением нет ни текста, ни пробела. Поэтому обычные в прошлом варианты верстки с сегментированными изображениями и GIF-разделителями в современных броузерах могут развалиться. Рассмотрим самый простой случай:

td {font-size: 12px;}