Как добиться правильной согласованности высоты строки CSS - PullRequest
Новая
       6

Как добиться правильной согласованности высоты строки CSS

9 голосов
/ 12 октября 2009

Мое основное правило CSS для font-size и line-height довольно простое: 

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 24px;
}

Когда я создаю абзац, который содержит <em> или <strong> (или даже некоторый <code>, который использует font-size, отличный от <body>), я замечаю, что эти элементы увеличивают высоту строки на один или два пикселя.

Это наводит меня на мысль, что большинство браузеров используют самый большой встроенный элемент для отображения line-height. Это правильно?

Моя цель - сделать line-height непротиворечивым, независимо от того, какие элементы встроены.

Единственный способ сделать line-height непротиворечивым - это определить: 

em, strong, code, etc {
    line-height: 100%;
}

Это правильный путь? Или я слишком перфекционист?

Редактировать 1:

Это также, кажется, работает: 

em, strong, code, etc {
    line-height: 1;
}

Редактировать 2:

После игры с этим в течение нескольких дней, похоже, не существует надежного решения для сохранения согласованного line-height. Если у кого-то есть идеи, я бы с удовольствием их услышал.

Редактировать 3:

Для моей будущей справки и из моего собственного исследования эти теги следует рассматривать с line-height: 1, если они отображаются в виде строки вместе с другим стандартным основным текстом: 

abbr, acronym, b, big, cite, code, del, dfn, em, i, ins, kbd, q,
samp, small, strong, sub, sup, tt, var

Эти элементы сомнительны: 

a, bdo, img, span

Ответы [ 5 ]

5 голосов
/ 13 октября 2009

spec подтверждает, что вы думали, что браузеры берут самый большой шрифт для вычисления высоты строки. Это означает, что ваш единственный вариант (и тот, который упоминается в спецификации) - это установить высоту строки для ВСЕХ встроенных блоков в строках, которые вас интересуют. Возможно, вы не будете довольны результатами выбора body * и установки размера шрифта. Итак, добавьте несколько Div с одним и тем же классом вокруг любых блоков текста, которые вы хотите выглядеть одинаково, и все готово: 

div.uniformlines * { 
    line-height: 100%;
    font-size: 16px;
}
2 голосов
/ 18 июля 2014

Кажется, лучше и гибче определить body {line-height: 0}, а затем определить высоту строки для основных областей содержимого с помощью line-height: 1 или 1,5 или чего-либо еще. Это позволяет вам контролировать другие элементы более динамично и последовательно.

Например, высота строки может быть действительно проблематичной для изображений или других сеток, которые хотят быть выровненными на одном уровне, например, в стиле галереи. Это чаще всего имеет место, когда изображения имеют теги привязки, которые наследуют высоту строки своего родителя. Спецификация допускает «нормальное» значение, но, похоже, это другой стандарт для браузера. 1 или 100% также являются опциями, но «0» в основном заставляет все браузеры использовать один и тот же стандарт, как хороший сброс CSS. Конечно, весь текст сжимается в одну строку с «0», поэтому необходимо задать высоту строки для областей содержимого.

Вот кодовый блок, который я собрал, чтобы проиллюстрировать смысл

0 голосов
/ 21 января 2015

Этой теме уже несколько лет, и за это время все могло измениться, но следующее (которое я заново открыл для http://webdesignandsuch.com/how-to-fix-sup-sub-line-height-problem-with-css/) работает для меня: 

* {
  vertical-align: bottom; }

Это довольно удивительно, поскольку vertical-align как таковое может показаться не связанным с line-height; опять же, это CSS, так что вы никогда не знаете. Сайт, приведенный выше, фактически предлагает 

sub {
  height: 0;
  line-height: 1;
  vertical-align: baseline;
  _vertical-align: bottom;
  position: relative; }

что для меня похоже на хак.

0 голосов
/ 13 октября 2009

Я не вижу такого поведения, но я использую WebKit. Не возникнет ли у вас проблема, если вы добавите несколько жирных тегов в этот пример?

http://www.w3schools.com/css/tryit.asp?filename=trycss_line-height

0 голосов
/ 12 октября 2009

Я думаю, это довольно изящная идея.

Однако не забывайте, что если жирный / курсивный текст слишком велик, вы можете ухудшить читабельность, сделав все строки действительно высокими, когда требуется только одна. Вы также можете захотеть иметь дело с надстрочными и подстрочными индексами, если ваш пример еще не позаботился об этом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...