Привет.
Вопрос по CSS. Я написал Ёу , а потом открыл девтулс и выдели этот строчный элемент. Получил это:
Не понимаю, что это за выделенная область? Что за 26 пикселей, когда я указал 24 пикселя?. У строчного элемента есть строчный блок (равен высоте line-height), есть область содержимого (равна font-size), есть контейнер строки.
Модель 1
У элемента есть область содержимого - это из модели контейнеров. Насколько я понимаю, на строчные элементы модель контейнеров тоже распространяется, так как можно те же margin, border, padding задать для строчного элемента. Как эти две модели взаимодействуют?
Модель 2
У модели контейнеров есть "область содержимого" и у модели чисто строчных элементов есть область содержимого (ее высота определяется как font-size).
Ответ
Свойство font-size задает размер кегельного квадрата по высоте. Потом берется шрифт, который соответствует этому кегельному квадрату по высоте. Глифы шрифта могу по высоте вылезать за эти кегельные квадраты В девтулсе синим выделяется область содержимого (content area) строчного элемента. Это прямоугольник. Согласно книге Эрика Мейера "CSS", в стандарте CSS 2.1 (страница 216 книги) есть два варианта того, как образуется content area: а) В своей книге он выбрал для простоты вариант, когда content area по высоте определяется размерами кегельных площадок по высоте, которое определяется, как уже написал, свойством font-size. б) content area - это самый маленький прямоугольник, который охватывает все глифы строки по высоте. В браузерах используется именно этот метод определения content area. Глифы шрифта больше, чем кегельная площадка (которую определяет font-size), поэтому content-area (наименьший прямоугольник, который охватывает глифы) больше, чем font-size
Комментариев нет:
Отправить комментарий