Тег <small> делает высоту абзаца больше

У меня есть следующая скрипта:

<p>some normal-sized text</p>

<p>some <small>small</small>-sized text</p>

p { line-height: 20px }

Когда я проверяю страницу в Chrome, я узнаю, что вычисленная высота первого абзаца 20 пикселей, но вычисленная высота второго абзаца равна 21px.

Почему тег <small> вызывает эти проблемы? Как я могу это исправить?

Каждое появление <small> в тексте абзаца испортит мою базовую сетку.

EDIT: Позднее я также нашел интересную статью, относящуюся к этой теме: Глубокое погружение CSS: метрики шрифта, высота строки и выравнивание по вертикали.

Ответ 1

Объяснение:

Здесь есть несколько вещей.

В вашем примере элемент small представляет собой элемент встроенного уровня, что означает, что его вертикальное выравнивание определяется vertical-align.

Значение по умолчанию vertical-align равно baseline, что означает, что базовая линия элемента small будет выровнена с базовой линией родительского поля:

Совместите базовую линию с базой исходного поля. Если поле не имеет базовой линии, выровняйте край нижнего края с исходной базой.

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

Для иллюстрации приведен пример изображения, демонстрирующего это (взято из W3.org):

Так как line-height есть 20px, а элемент small имеет font-size of 13px, то мы можем определить, что 3.5px пространства добавляется выше и ниже текста элемента small

(20px - 13px) / 2 =  3.5px

Аналогично, если мы вычисляем половину ведущих текстовых узлов surronding, которые имеют font-size of 16px, мы можем определить, что 2px пространства добавляется выше и ниже окружающего текста.

(20px - 16px) / 2 =  2px

Теперь, если мы свяжемся с этими вычислениями с половинной ведомостью обратно к свойству vertical-align, вы заметите, что вместо базовой линии элемента small добавляется больше места. Это объясняет, почему вычисленная высота элемента p, содержащего элемент small, была больше, чем вычисленная высота другого элемента p.

С учетом сказанного вы ожидаете, что вычисленная высота элемента p будет продолжать увеличиваться по мере уменьшения элемента font-size элемента small. Чтобы проиллюстрировать этот момент, вы заметите, что вычисленная высота элемента p равна 23px, когда элемент font-size элемента small установлен на 6px.

p { line-height: 20px; }
small { font-size: 6px; }

<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>

Ответ 2

Альтернативой ответам, опубликованным Джошем Крозье, будет reset малая длина линии:

p { line-height: 20px }
small {line-height: initial;}

<p>some normal-sized text</p>

<p>some <small>small</small>-sized text</p>

Ответ 3

Вы можете использовать относительное значение для line-height. В вашем случае размер базового шрифта составляет 16 пикселей, поэтому высота линии 20px в относительных единицах будет 1.25

p { line-height: 1.25; }

<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>

Ответ 4

Это происходит из-за небольшого тега, имеющего размер шрифта: меньше, а p-тэг имеет больший размер, а затем небольшой тег, поэтому это различие в малом и тэге, создавая эту проблему. Когда вы помещаете небольшой тег в тег p, увеличивайте высоту, потому что маленький тег занимает небольшое пространство, а затем тег p.

Совместив эту проблему, вы должны указать высоту строки для маленького тега 19px, например:

p { line-height: 20px }
small{line-height: 19px}

<p>some normal-sized text</p>

<p>some <small>small</small>-sized text</p>