css — Как выстраиваются строковые блоки внутри контейнера строки?
Вопрос по CSS. Если задать font-size > line-height, например, font-size: 24px и line-height: 12px, то половинный интервал будет отрицательным (-6px). Не могу представить поведение строчного элемента, когда у него половинный интервал отрицательный.
<p>
This is text, <em>some of which is emphasized</em>, plus other text<br>
which is <strong>strongly emphasized</strong>
and which is<br>
larger than the surrounding text.
</p>
В этом примере font-size большей части текста составляет 12px, тогда
как текст одного из строковых незамещаемых элементов имеет размер 24px. Однако значение line-height всего текста – 12px, поскольку line-height – это наследуемое свойство. Таким образом, line-height элемента strong – также 12px
В данном примере для анонимного текста (который не лежит в строчном элементе) и для курсива высота строки равна высоте шрифта (font-size равен line-height, который равен 12px). Для элемента strong ситуация другая.
- Не понимаю, почему в данном примере контейнер строки по высоте равен 15 пикселей.
Как блочные элементы выкладываются в документ понятно – сверху вниз кладутся прямоугольники-блоки один под другим. При этом надо учитывать поля, рамки и отступы + плавающие элементы.
А вот как это происходит с текстом и текстовыми элементами внутри блока, а они ФОРМИРУЮТ ВЫСОТУ блока в большинстве случаев — мне не понятно. 2. Объясните, пожалуйста, подробно, как строки ВЫКЛАДЫВАЮТСЯ в документ.
В строках есть блоки (не блочные элементы, а просто блоки) — область содержимого (content area), строковый блок (inline box), контейнер строки (line box). Написано в книге Мейера, что «Контейнер строки (line box) — это наименьший блок, охватывающий самую верхнюю и самую нижнюю точки строковых блоков, находящихся в строке.
Мейер в своей книге пишет «Для каждой области содержимого определяем, какая ее часть находится выше базовой линии всей строки и какая ее часть находится под базовой линией. Это непростая задача: должно быть известно положение базовой линии каждого элемента и каждого куска анонимного текста и базовой линии самой строки, затем они все должны быть выстроены в ряд.»
Что значит «базовая линия всей строки»? Базовая линия, насколько я понимаю, может быть только у анонимного текста или строкового элемента. А строка – это кусок анонимного текста и/или строчного элемента, которая ВЛЕЗЛА по ширине в блочный элемент-контейнер.
Понял то, что каждая строка лежит в контейнере строки, эти контейнеры ложатся один под другим вплотную.
Свойство line-height — межстрочный интервал (высота линии текста)
Свойство line-height устанавливает
интервал между строками текста (межстрочный
интервал).
Свойство не задает промежуток между строками
текста, как могло бы показаться, оно задает высоту линии текста. Это значит, что
реальный промежуток между строками будет
вычисляться так: line-height — font-size = расстояние между строками текста. Или наоборот line-height = font-size + расстояние
между строками текста.
Синтаксис
селектор {
line-height: значение;
}
Значения
Значением свойства служат любые единицы для размеров. При указании значения в % межстрочный интервал будет в процентах от размера шрифта.
Кроме того, можно задать значением любое
число больше нуля. В этом случае оно воспринимается
как множитель от размера шрифта.
Например,
если font-size имеет значение 20px,
а line-height — 1.5, то это
все равно, что написать line-height: 30px (20px * 1.5 = 30px).
По умолчанию свойство имеет значение normal,
в этом случае браузер выбирает межстрочный
интервал автоматически.
Пример
В данном примере расстояние между строками
текста будет font-size = 38px — 18px = 20px:
<p>
какой-то текст...
</p>p {
font-size: 18px;
line-height: 35px;
text-align: justify;
}
:
Пример
Уменьшим промежуток до 25px — 18px = 7px:
<p>
какой-то текст...
</p>p {
font-size: 18px;
line-height: 25px;
text-align: justify;
}
:
Пример
В данном примере расстояние между строками
текста будет line-height — font-size = 18px — 18px = 0px — строки практически слипнуться (хвостики
букв верхней строки будут касаться хвостиков
букв нижней):
<p>
какой-то текст.
..
</p>p {
font-size: 18px;
line-height: 18px;
text-align: justify;
}
:
Пример
В данном примере значение line-height — множитель 1.5 от размера шрифта.
Следовательно line-height будет эквивалентен font-size * 1.5 = 18px * 1.5
= 27px. А реальный промежуток между
строками будет line-height — font-size = 27px — 18px = 9px:
<p>
какой-то текст...
</p>p {
font-size: 18px;
line-height: 1.5;
text-align: justify;
}
:
Пример
Увеличим множитель:
<p>
какой-то текст...
</p>p {
font-size: 18px;
line-height: 2.
5;
text-align: justify;
}
:
Пример
Если сделать line-height меньше font-size,
то строки вообще налезут друг на друга:
<p>
какой-то текст...
</p>p {
font-size: 18px;
line-height: 13px;
text-align: justify;
}
:
CSS Высота текста по вертикали
Задание определенной высоты текстовых элементов на странице обычно не вызывает затруднений. Вот спецификации для пары текстовых ситуаций, с которыми вы столкнетесь.
Примечание: Эксперименты были проведены в Chrome 27, но это должно быть довольно стабильным в браузерах
Текст в Div
Текст, скорее всего, чаще всего просто наклеен на вашем сайте. К счастью для всех нас, это самый простой способ рассчитать и гарантировать вертикальную высоту.
Формула проста.
Здесь высота по вертикали рассчитывается следующим образом:
высота по вертикали = поля + границы + отступы + (высота строки || высота)
высота строки или высота будет определять высоту основного тела текстовый контейнер, например div . Подойдет любой.
Я предполагаю, что большую часть времени вы хотите, чтобы ваш текст располагался вертикально по центру контейнера. Но в тех случаях, когда вы хотите, чтобы он обхватывал верх или низ, добавьте высоту строки, которая меньше или больше высоты, соответственно, чтобы перемещать текст вертикально внутри контейнера.
Текст в поле ввода
Текст, появляющийся в поле ввода, гораздо сложнее и имеет еще несколько предостережений. Существует два основных режима определения высоты по вертикали: без высоты или с высотой :
Высота не указана
Если высота не задана, традиционные атрибуты, создать общую высоту по вертикали.
Эта формула принимает следующий вид:
высота = поле + граница + отступ + (высота строки || размер шрифта)
Некоторые замечания и предостережения:
размер шрифтавлияет только на высоту по вертикали, когда она приближается или превышает высоту строкиpadding,borderиmarginвсегда влияют на высоту по вертикали, независимо от их значения.Если
размер шрифтадостаточно мал, чтобы не влиять навысота строки,высота строкиможет использоваться для точной суммы высоты по вертикали.Если
font-sizeвместоline-heightвлияет на высоту по вертикали, значение pxfont-sizeне будет использоваться для гарантии высоты. Каждый шрифт имеет разную высоту. Для каждого шрифта необходимо произвести расчет.
Указанная высота
Если задано значение height , формула входной высоты по вертикали всегда будет
высота по вертикали = высота + поле
Некоторые наблюдения и предостережения:
Если
поле,границаиотступв сумме больше, чемвысота, то это становится новой высотой.
высота строкииразмер шрифтане влияют на высоту по вертикали, независимо от атрибутавысота.margin,borderиpaddingатрибуты вообще не влияют на высоту по вертикали, если их суммарная высота меньше фактическойвысотаатрибут.Как только
line-heightпревышаетheight, текст на входе перемещается вертикально вниз, в конечном итоге скрываясь.Когда
размер шрифтаприближается квысоте, текст в конечном итоге станет скрытым.границане повлияет на высоту по вертикали, но все же повлияет на ширину по горизонтали.vertical-align, как и в большинстве случаев, ничего не делает.
Line Height — Tailwind CSS
Basic usage
Relative line-heights
Use the leading-none , leading-tight , leading-snug , leading-normal
Leading-Relax и Leading-Loose утилиты для придания элементу относительной высоты строки в зависимости от его текущего размера шрифта.
ведущий-нормальный
Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но я скажу тебе, Джерри, в тот момент, я был морским биологом.
ведущий-расслабленный
Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе, Джерри, в тот момент я
лидер-свободный
Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие.
Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но я скажу тебе, Джерри, в тот момент, я был морским биологом.
Итак, я начал ходить в воду...
Поэтому я начал ходить в воду...
Поэтому я начал ходить по воде...
Fixed line-heights
Используйте утилиты Leading-{size} , чтобы задать элементу фиксированную высоту строки, независимо от текущий размер шрифта. Они полезны, когда вам нужен очень точный контроль над окончательным размером элемента.
ведущий-6
Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе, Джерри, в тот момент я был морским биологом.
ведущий-7
Так я начал ходить в воду.
Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но я скажу тебе, Джерри, в тот момент, я был морским биологом.
ведущий-8
Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе, Джерри, в тот момент я
Итак, я начал ходить в воду...
Поэтому я начал ходить в воду...
Поэтому я начал ходить в воду...
Условное применение
Наведение, фокус и другие состояния
Tailwind позволяет вам условно применять служебные классы в различных состояниях, используя модификаторы вариантов.
Например, используйте hover:leading-loose , чтобы применить утилиту lead-loose только при наведении курсора.
Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.
Точки останова и медиа-запросы
Вы также можете использовать модификаторы вариантов для таргетинга медиа-запросов, таких как чувствительные точки останова, темный режим, предпочтения с уменьшенным движением и т. д. Например, используйте md:leading-loose , чтобы применить утилиту lead-loose только на экранах среднего размера и выше.
Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.
Переопределение высоты строки по умолчанию
Важно отметить, что по умолчанию каждая утилита размера шрифта Tailwind устанавливает свою собственную высоту строки по умолчанию.
Это означает, что каждый раз, когда вы используете отзывчивую утилиту для изменения размера шрифта, такую как sm:text-xl , любая явная высота строки, которую вы установили для меньшей точки останова, будет переопределена.
Может быть, мы сможем жить без библиотек...
Если вы хотите переопределить высоту строки по умолчанию после установки размера шрифта для точки останова, убедитесь, что также установлена высота строки для точки останова:
Может быть, мы сможем жить без библиотек...
Использование одинаковой высоты строки для разных размеров шрифта, как правило, не дает хороших типографских результатов. Высота строки обычно должна уменьшаться по мере увеличения размера шрифта, поэтому поведение по умолчанию здесь обычно экономит вам массу работы. Если вы обнаружите, что боретесь с этим, вы всегда можете настроить шкалу размера шрифта, чтобы она не включала высоту строки по умолчанию.