4

Привет.

Вопрос по CSS. Я написал <strong style="font-size: 24px;font-family:arial;">Ёу</strong> , а потом открыл девтулс и выдели этот строчный элемент. Получил это:

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

  1. Не понимаю, что это за выделенная область? Что за 26 пикселей, когда я указал 24 пикселя?. У строчного элемента есть строчный блок (равен высоте line-height), есть область содержимого (равна font-size), есть контейнер строки.

Модель 1

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

  1. У элемента есть область содержимого - это из модели контейнеров. Насколько я понимаю, на строчные элементы модель контейнеров тоже распространяется, так как можно те же margin, border, padding задать для строчного элемента. Как эти две модели взаимодействуют?

Модель 2

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

У модели контейнеров есть "область содержимого" и у модели чисто строчных элементов есть область содержимого (ее высота определяется как font-size).

1
  • Для задания высоты строчного элемента используйте line-height 26 янв 2017 в 22:04

3 ответа 3

6
  1. Дело в line-height(межстрочный интервал), посмотрите в девтулс сколько задана для для этого элемента должно быть line-height: 1.3;(зависит от вида и размера шрифта)
  2. Почитайте line-height
5
  • если я напишу, например, line-height:24px, то при выделении блока показывает 17,7 пикселей
    – Dimon
    26 янв 2017 в 23:23
  • 2
    codepen.io/Mitrandil/pen/mRBadP Размер шрифта font-size – это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях. Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая «нижние хвосты» букв, таких как p,y. Как видно из примера выше, при размере строки, равном font-size, строка не будет размером точно «под букву». В зависимости от шрифта, «хвосты» букв при этом могут вылезать, буквы р,y в примере выше как раз задают те не понятные для вас лишние пиксели для блока.Обычно размер строки делают чуть больше, чем шрифт.
    – Дарья
    27 янв 2017 в 0:20
  • задание line-height вместо font-size не решает проблему. все равно content area получается больше в пикселях, чем указанный line-height. то, что в вашем примере обводится красной рамочкой - это контейнеры строк. и они, рассчитываются как-то непонятно
    – Dimon
    27 янв 2017 в 11:19
  • Отредактировала пример, из-за тега strong (браузер добавляет font-weight: bold(700);), рамочка стала больше на 2px, остальные рамки равны line-height:24px. По умолчанию значение font-weight:norma(400); задаётся браузером. Почитайте: htmlbook.ru/css/font-weight
    – Дарья
    27 янв 2017 в 20:11
  • если написать <span style="font-size: 24px;font-family:arial;">Ёу</span>, то будет то же самое. дело не в жирности
    – Dimon
    27 янв 2017 в 20:37
1
  1. Свойство font-size задает размер кегля по вертикали. line-height- это 120 процентов от font-size (https://developer.mozilla.org/en-US/docs/Web/CSS/line-height).

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

  1. То, какой высоты будет символ при этом вертикальном размере кегля , определяет изготовитель шрифта.введите сюда описание изображения
2
  • Желательно добавить ссылку на спецификацию, где говорится про 120%.
    – Qwertiy
    8 фев 2017 в 13:35
  • добавлю ссылку про 120 процентов
    – Dimon
    8 фев 2017 в 13:38
0
  1. Свойство font-size задает размер кегельного квадрата по высоте.
  2. Потом берется шрифт, который соответствует этому кегельному квадрату по высоте. Глифы шрифта могу по высоте вылезать за эти кегельные квадраты.
  3. В девтулсе синим выделяется область содержимого (content area) строчного элемента. Это прямоугольник. Согласно книге Эрика Мейера "CSS", в стандарте CSS 2.1 (страница 216 книги) есть два варианта того, как образуется content area: а) В своей книге он выбрал для простоты вариант, когда content area по высоте определяется размерами кегельных площадок по высоте, которое определяется, как уже написал, свойством font-size. б) content area - это самый маленький прямоугольник, который охватывает все глифы строки по высоте. В браузерах используется именно этот метод определения content area. Глифы шрифта больше, чем кегельная площадка (которую определяет font-size), поэтому content-area (наименьший прямоугольник, который охватывает глифы) больше, чем font-size

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.