Как достичь согласованности собственно CSS высоту строки

Мое основное правило CSS для font-size и line-height довольно прост:Как достичь согласованности собственно CSS высоту строки

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%; 
}

Является ли это правильный путь идти об этом? Или я слишком много перфекционист?

Edit 1:

Это также похоже на работу:

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

Edit 2:

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

Edit 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

источник

2009-10-12 Jeff

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

div.uniformlines * { 
    line-height: 100%; 
    font-size: 16px; 
}

источник

2009-10-13 17:26:03 WillfulWizard

Отличная информация! Что относительно 'p * {line-height: 0; } ', или еще лучше, может быть,' p a, p code, p big {line-height: 0; } '? Теперь мы куда-то попадаем. ';)' – Jeff

Последующий комментарий к моему последнему комментарию. Будьте осторожны с моим кодом выше. Если у вас есть, например, '

foo

', высота линии будет вычисляться до нуля, что, вероятно, не является тем, что вы хотите. – Jeff

Я думаю, что это довольно п есть идея.

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

источник

2009-10-12 15:58:17 DisgruntledGoat

Ooooo да, работая над sub и sup сейчас, но о готовности сдаться. Lol – Jeff

Хм, только что вернулся к этому, и я не думаю, что я написал правильно. Установка высоты линии до 100% не поддерживает ее согласованность - линия с большим текстом больше, но последующие строки возвращаются к нормальному. Ваш пример установки высоты строки в 0 сохраняет все линии до их первоначальной высоты - в этом случае вам нужно убедиться, что более крупный текст не перекрывает другие строки. – DisgruntledGoat

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

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

источник

2009-10-13 10:16:52

Да, конечно (FF 3.0.x). Сейчас я работаю над этой проблемой, и не похоже, что есть дружественное решение. – Jeff

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

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

Here's a codepen I put together to illustrate the point

источник

2014-07-18 18:25:54

Эта нить уже лет, и все могло измениться в то же время, но в следующем (что я вновь на 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; }

, который выглядит как взломать меня.

источник

2015-01-21 05:12:07 flow

Как достичь согласованности собственно CSS высоту строки

ответ

Смежные вопросы