Как задать высоту у селекта?
Кросбраузерно никак. Только эмуляция кастомного селекта.
Скачайте jquery плагины для стилизации и там а API будет указано как увеличить величину селекта, либо полазь в исходниках.
Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
ответ дан 5 сен 2012 в 18:26
2,480 7 7 золотых знаков 32 32 серебряных знака 47 47 бронзовых знаков
Разве CSS-ом нельзя ?
#selectStyle select
Отслеживать
ответ дан 5 сен 2012 в 21:06
725 6 6 золотых знаков 21 21 серебряный знак 53 53 бронзовых знака
А разве высоту options тоже можно установить?
5 сен 2012 в 21:25
Отслеживать
ответ дан 25 авг в 14:08
Er Bakhshyan Er Bakhshyan
Ваш ответ можно улучшить с помощью дополнительной информации. Пожалуйста, нажмите править для добавления подробностей, например, цитат или документации, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти дополнительную информацию о том, как писать хорошие ответы в Справке.
Основные понятия Grid Layout
Грид-раскладка (CSS Grid Layout) представляет собой двумерную систему сеток в CSS. Гриды подойдут и для верстки основных областей страницы, и небольших элементов пользовательского интерфейса. Эта статья даёт общее представление о грид-раскладке и новой терминологии, которая является частью спецификации CSS Grid Layout Level 1. Более подробно показанные возможности будут описаны описаны далее в руководстве.
Что такое грид?
Грид представляет собой пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки. Элементы могут быть помещены в грид в пределах линий этих колонок и строк. Грид имеет следующие особенности:
Фиксированные и гибкие размеры полос
Вы можете создать грид с фиксированными размерами полоc, например используя пиксели. Это установит грид на определенный пиксель, соответствующим желаемому макету. Вы также можете создать грид с гибкими размерами, используя проценты или новую единицу измерения — « fr », разработанную для этой цели.
Расположение элемента
Вы можете размещать элементы в заданном месте на гриде используя номера строк, имена или путём привязки к области грида. Грид также содержит алгоритм управления размещением элементов, не имеющих явной позиции на гриде.
Создание дополнительных полос для хранения контента
Вы можете определить явную сетку с помощью грид-раскладки. Cпецификация грид-раскладки достаточно гибкая, чтобы добавить при необходимости дополнительные строки и колонки. Также в нее включены такие возможности как, например, добавление «стольких колонок, сколько будет помещено в контейнер».
Управление выравниванием
Грид содержит механизм выравнивания, таким образом мы можем контролировать, как элементы выравниваются после размещения в области сетки и как выравнивается вся сетка.
Управление перекрывающимся контентом
В ячейку или область грида может быть помещено несколько элементов; эти элементы могут частично перекрывать друг друга. Такое наложение можно контролировать с помощью свойства z-index .
Грид – это мощная спецификация, и в сочетании с другими частями CSS, такими как flexbox, поможет вам создать макеты, которые ранее невозможно было построить в CSS. Все начинается с создания сетки в вашем грид-контейнере.
Грид-контейнер
Мы создаём grid контейнер, объявляя на элементе display: grid или display: inline-grid . Как только мы это сделаем, все прямые потомки этого элемента станут элементами сетки.
В этом примере у меня есть контейнер div с классом-обёрткой и пятью дочерними элементами внутри.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
Я сделал .wrapper грид-контейнером.
.wrapper display: grid; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Все прямые потомки теперь являются грид-элементами. В браузере вы не увидите разницы с тем, как элементы отображались до помещения их в грид, поскольку грид сделан как одноколоночная сетка. На этой стадии вам, возможно, будет удобнее работать с инструментом «Грид-инспектор» (en-US) , который является частью «Инструментов веб-разработчика» Firefox (Firefox’s Developer Tools). Если вы просмотрите этот пример в Firefox и проинспектируете грид, вы увидите маленький значок рядом с значением grid . Нажмите на него и сетка на этом элементе будет наложена в окне браузера.
По мере вашего обучения и последующей работы с грид-раскладкой этот инструмент даст вам лучшее визуальное представление о том, что происходит с вашим гридом.
Если мы хотим, чтобы пример стал более похожим на сетку, нам нужно добавить полосы-колонки.
Грид-треки (грид-полосы)
Мы определяем ряды и колонки в нашей сетке при помощи свойств grid-template-columns и grid-template-rows . Это определения грид-треков (грид-полос). Грид-трек – это промежуток между любыми двумя линиями грида. На изображении ниже вы можете увидеть подсвеченный трек – это первый трек-строка в нашем гриде.
Базовый пример
Я могу дополнить пример выше, добавив свойство grid-template-columns и задав размеры треков-колонок.
Сейчас я создал грид с тремя колонками шириной по 200px. Каждый дочерний элемент будет располагаться в отдельной ячейке грида.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
.wrapper display: grid; grid-template-columns: 200px 200px 200px; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Единица измерения «fr»
Размер треков может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать гибкие (flexible) грид-треки. Новая единица длины « fr » представляет собой долю (fraction) доступного пространства в грид-контейнере. Следующее определение грида создаст три одинаковых по ширине трека, расширяющихся и сужающихся в соответствии с доступным пространством.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
.wrapper display: grid; grid-template-columns: 1fr 1fr 1fr; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Разные размеры
В следующем примере мы создаём грид с треком в 2fr и двумя треками по 1fr . Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части – два оставшихся.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
.wrapper display: grid; grid-template-columns: 2fr 1fr 1fr; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Смешение гибких и фиксированных размеров
В последнем примере смешаем треки с абсолютными размерами и треки с размерами, определенными в fr . Первый трек – 500 пикселей, фиксированная ширина убирается из доступного пространства. Оставшееся пространство разбивается на три части и пропорционально разделяется между двумя гибкими треками.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
.wrapper display: grid; grid-template-columns: 500px 1fr 2fr; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Задание треков с помощью нотации repeat()
В огромных гридах с большим количеством треков можно использовать нотацию repeat() , чтобы повторить всю структуру треков или её часть. Например, определение грида:
.wrapper display: grid; grid-template-columns: 1fr 1fr 1fr; >
Может быть также записано как:
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); >
Repeat-нотация может быть использована для части структуры треков. В следующем примере я создал грид с начальным треком в 20 пикселей, затем повторил секцию с шестью треками по 1fr и завершил 20-пиксельным треком.
.wrapper display: grid; grid-template-columns: 20px repeat(6, 1fr) 20px; >
Repeat-нотация принимает список треков и использует его для создания повторяющегося шаблона треков. В следующем примере мой грид состоит из 10 треков: за треком в 1fr следует трек в 2fr . Этот шаблон будет повторен пять раз.
.wrapper display: grid; grid-template-columns: repeat(5, 1fr 2fr); >
Явный и неявный грид
При создании грида в примере выше мы специально объявляли треки-колонки при помощи свойства grid-template-columns , но грид также самостоятельно создавал строки. Эти строки — часть «неявного» грида. В отличие от него, «явный» грид состоит из строк и колонок, заданных с помощью grid-template-columns или grid-template-rows .
Если вы размещаете что-нибудь вне рамок определённого грида или из-за количества контента требуется большее количество грид-треков, грид создаёт строки и колонки в виде неявного грида. Размер этих треков по умолчанию задаётся автоматически в зависимости от находящегося в них контента.
Вы также можете задать размер треков, создаваемых в виде неявного грида, с помощью свойств grid-auto-rows (en-US) и grid-auto-columns (en-US).
В примере ниже мы используем grid-auto-rows , чтобы убедиться, что треки, создаваемые в неявном гриде, были высотой 200 пикселей.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Масштабирование треков и minmax()
При задании размеров явного грида или при определении размеров автоматически создаваемых колонок или строк нам может понадобиться задать трекам минимальный размер, но при этом быть уверенными, что они треки растянутся, чтобы вместить весь добавленный в них контент. Например, мне нужно, чтобы строки никогда не становились меньше 100 пикселей, но если контент занимает 300 пикселей в высоту, я бы хотел растянуть строку на эту высоту.
В гриде есть решение этой задачи – функция minmax() . В следующем примере я использую minmax() в качестве grid-auto-rows (en-US). То есть автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум – примут значение auto . Использование auto означает следующее: высота строки «растягивается» до размера ячейки с самым высоким элементом контента.
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
div class="wrapper"> div>Onediv> div> Two p>I have some more content in.p> p>This makes me taller than 100 pixels.p> div> div>Threediv> div>Fourdiv> div>Fivediv> div>
Грид-линии
Нужно заметить, что когда мы определяем грид, мы определяем грид-треки, а не грид-линии. После этого грид обеспечивает нас пронумерованными линиями, для использования при размещении элементов. В нашем гриде с тремя колонками и двумя рядами у нас есть четыре линии колонок.
Линии пронумерованы в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, линия 1 – самая левая линия в гриде. В языках с написанием справа налево линия 1 – самая правая линия в гриде. Линии также могут быть именованы, и мы рассмотрим, как это сделать, в одном из последующих руководств этой серии.
Размещение элементов по линиям
Детально размещение элементов с помощью линий мы рассмотрим в дальнейшем. Следующий пример демонстрирует простой способ. При размещении элемента мы задаем линию, а не на трек.
В следующем примере я разместил первые два элемента на нашем трёхколоночном гриде с помощью свойств grid-column-start (en-US), grid-column-end (en-US), grid-row-start и grid-row-end (en-US). Работая слева направо, первый элемент размещен начиная с колоночной линии 1 и занимает пространство до колоночной линии 4, которая в нашем случае – самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.
Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому нет необходимости задавать конечную линию. Элемент также занимает два строчных трека – со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в свободном месте на гриде.
div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div class="box5">Fivediv> div>
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; > .box1 grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; > .box2 grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Примечание: Не забывайте, что вы можете использовать Grid Inspector (en-US) в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.
Сокращения при использовании размещения по линиям
Обычные значения, использованные выше, могут быть умещены в одну строку: для колонок – с использованием grid-column , для строк – с использованием grid-row (en-US). Следующий пример сделает такое же расположение, как и предыдущий, но с менее громоздким кодом CSS. значение до слэша («/») – это первая линия, значение после – последняя линия.
Можно опустить конечное значение, если область занимает только один трек.
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; > .box1 grid-column: 1 / 4; grid-row: 1 / 3; > .box2 grid-column: 1; grid-row: 3 / 5; >
Грид-ячейки
Грид-ячейка – наименьшая часть на гриде. Концептуально она похожа на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определён для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке заданного грида. На рисунке ниже я выделил первую ячейку грида.
Грид-области
Элементы могут занимать одну или несколько ячеек внутри строки или колонки, таким образом, создаётся грид-область. Грид-области должны быть перпендикулярными – невозможно создать область, например, в форме буквы «L». Выделенная грид-область на рисунке ниже занимает два строчных трека и два колоночных.
Промежутки
Промежутки (gutters), или дорожки (alleys), между грид-ячейками могут быть созданы с помощью свойств grid-column-gap (en-US) и grid-row-gap (en-US), или с помощью сокращённого свойства grid-gap (en-US). В примере ниже я создаю 10-пиксельный промежуток между колонками и промежуток в 1em между строками.
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; grid-row-gap: 1em; >
Примечание: Когда грид был добавлен в браузеры, у свойств column-gap , row-gap и gap был префикс «grid-»: «grid-column-gap», «grid-row-gap» «grid-gap» соответственно.Сейчас все браузеры поддерживают значения без префикса, однако версии с префиксом будут поддерживаться как псевдонимы, что делает их использование безопасным.
div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Пространство, занимаемое промежутками, будет учитываться как пространство, расположенное перед гибкими треками, заданными с помощью fr , и приписанное к длине этих треков, и промежутки служат для задания размеров как обычные грид-треки, однако в промежутках нельзя ничего размещать. С точки зрения размещения по линиям, промежутки действуют в роли толстой линии.
Вкладывание гридов
Грид-элемент может быть и грид-контейнером. В следующем примере у меня есть созданный ранее трёхколоночный грид, с двумя нашими размещенными элементами. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в нормальном потоке документа.
Вкладывание без подгридов
Если я задам для box1 значение display: grid , я могу установить для него структуру треков, и он тоже станет гридом. Элементы будут размещены на этом новом гриде.
.box1 grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; display: grid; grid-template-columns: repeat(3, 1fr); >
div class="wrapper"> div class="box box1"> div class="nested">adiv> div class="nested">bdiv> div class="nested">cdiv> div> div class="box box2">Twodiv> div class="box box3">Threediv> div class="box box4">Fourdiv> div class="box box5">Fivediv> div>
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); > .box border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .box1 grid-column: 1 / 4; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
В данном случае вложенный грид не связан с родительским. Как вы можете видеть, он не наследует значение свойства gap родителя и линии вложенного грида не выравниваются по линиям родительского грида.
Подгрид (Subgrid)
В рабочих черновиках спецификации гридов второго уровня есть функциональность, называемая подгридом, которая позволит нам создавать вложенные гриды, использующие структуру треков родительского грида.
Примечание: Эта функция поддерживается в браузере Firefox 71, который в настоящее время является единственным браузером, обеспечивающим выполнение подгрида.
Согласно этой спецификации, мы можем отредактировать приведенный выше пример вложенного грида, изменив grid-template-columns: repeat(3, 1fr) на grid-template-columns: subgrid . Вложенный грид будет использовать родительскую структуру треков для размещения элементов.
.box1 grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; display: grid; grid-template-columns: subgrid; >
Размещение элементов с помощью z-index
Несколько грид-элементов могут занимать одну и ту же ячейку и поэтому мы можем использовать свойство z-index , чтобы контролировать порядок наложения перекрывающихся элементов.
Наложение без z-index
Если мы вернемся к нашему примеру с элементами, размещёнными по номерам линий, мы можем изменить его, чтобы два элемента перекрывались:
div class="wrapper"> div class="box box1">Onediv> div class="box box2">Twodiv> div class="box box3">Threediv> div class="box box4">Fourdiv> div class="box box5">Fivediv> div>
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; > .box1 grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; > .box2 grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; >
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .box border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Элемент box2 теперь перекрывает box1 , он отображается сверху, поскольку в исходном коде находится ниже.
Управление порядком отображения
Мы можем управлять порядком наложения элементов с помощью свойства z-index – точно так же, как позиционированными элементами. Если мы зададим для box2 значение z-index , меньшее, чем у box1 , он отобразится под элементом box1 .
.wrapper display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; > .box1 grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; z-index: 2; > .box2 grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; z-index: 1; >
div class="wrapper"> div class="box box1">Onediv> div class="box box2">Twodiv> div class="box box3">Threediv> div class="box box4">Fourdiv> div class="box box5">Fivediv> div>
* box-sizing: border-box; > .wrapper border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .box border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > .nested border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; >
Что дальше?
В данной статье мы очень кратко рассмотрели спецификацию Grid Layout. Поиграйте с примерами кода и переходите к следующей части нашего руководства, где мы начнём углубляться в детали CSS Grid Layout.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как настроить высоту строки в CSS
Межстрочный интервал в CSS – наверное, одно из самых непонятных, но широко используемых свойств. Дизайнеры и разработчики, услышав слово «межстрочный интервал» могут подумать о таком интересном понятии, как интерлиньяж. Раньше так называли процесс вставки свинцовых полос между строками текста.
Несмотря на то, что интерлиньяж и свойство line-height довольно похожи, у них есть некоторые важные различия. Чтобы понять эти различия, нам нужно для начала немного углубиться в типографику.
Краткий гид по типографическим терминам
В традиционном дизайне шрифта строка состоит из нескольких элементов:
- Базовая линия (Baseline) : Это воображаемая линия, на которой располагается текст. Когда вы пишете в тетради в линейку, строка на которой вы пишете – и есть базовая линия.
- Нижний выносной элемент (Descender) : Это линия, которая находится чуть ниже базовой. В ней оказываются части букв, – например, строчных р, у, ф – которые выходят за пределы базовой линии.
- X-высота (X-height) : Это (кто бы мог подумать) высота обычной маленькой буквы x в строке текста. Как правило, эту высоту имеют и другие строчные буквы, хотя некоторые из них выходят за пределы x-высоты. В любом случае, x-высота является общепринятой высотой строчных букв.
- Высота прописных (Cap-height) : Это высота большинства заглавных букв на линии текста.
- Верхний выносной элемент (Ascender) : Это линия, которая обычно находится чуть выше линии роста прописных. Там оказываются части букв, которые выходят за пределы высоты прописных.
Все элементы текста, описанные выше, относятся к самому шрифту. Дизайн шрифта создаётся, учитывая каждый из них. Однако есть некоторые типографические детали, которые настраиваются разработчиками, а не дизайнерами. Одна из них – интерлиньяж (leading).
Интерлиньяж обозначает установленное в настройках шрифта расстояние между двумя базовыми линиями.
Веб-разработчик может подумать: «Ладно, интерлиньяж – это line-height, давайте дальше». Но, несмотря на то, что эти два понятия связаны, они различаются в некоторых важных аспектах.
Давайте возьмем пустой документ и применим к нему классический сброс стилей.
Так убирается внешний и внутренний отступ для всех элементов.
Также мы используем шрифт Lato из Google Fonts для свойства font-family.
Нам нужно добавить содержимое, поэтому давайте создадим тэг с текстом и дадим line-height какое-нибудь безумно большое значение, например, – 300px. В результате получаем одну строку текста с невероятно большим отступом сверху и снизу.
Когда браузер сталкивается со свойством line-height, он помещает строку текста в середину «линейного блока», высота которого соответствует высоте элемента. Вместо интерлиньяжа для шрифта, мы получаем что-то вроде свойства padding с каждой стороны строки.
Как показано выше, линейный блок содержит строку текста, в которой межстрочный интервал создается из отступа снизу одной строки текста и сверху другой. Это означает, что над первой и под последней строкой текста каждого элемента на странице отступ будет равняться половине межстрочного интервала.
Но, что ещё более удивительно, если придать свойствам line-height (высота строки) и font-size (размер шрифта) одинаковую величину, то всё равно останется лишнее пространство над и под текстом. Мы можем это увидеть, изменив цвет фона элементов.
Это происходит потому что, хотя размер шрифта составляет 32px, реальный размер текста будет немного меньше этого значения из-за наличия отступов.
Делаем так, чтобы CSS принимал высоту строки за интерлиньяж
Если мы хотим использовать в CSS более традиционные настройки вместо линейного блока, нам нужно будет сделать так, чтобы у строки текста не было отступов сверху и снизу, а элементы могли занять всю её высоту.
Можно научить CSS делать интерлиньяж, если приложить немного усилий. Майкл Таранто создал инструмент Basekick, который применяется для достижения именно этой цели. Он придает свойству margin псевдоэлемента ::before отрицательное значение, а к самому элементу применяет функцию translateY. В результате этого мы получаем строку текста, которая не имеет никаких лишних отступов.
Последнюю версию формулы инструмента Basekick можно найти в исходном кодедизайнерской системы Braid от компании SEEK. В примере, приведенном ниже, мы используем примесь Sass, которая сделает всю тяжелую работу за нас. Такую же формулу можно создать с помощью примесей в JavaScript, Less, PostCSS или в чем-то другом, имеющем подобные математические функции.
@function calculateTypeOffset($lh, $fontSize, $descenderHeightScale) < $lineHeightScale: $lh / $fontSize; @return ($lineHeightScale - 1) / 2 + $descenderHeightScale; >@mixin basekick($typeSizeModifier, $baseFontSize, $descenderHeightScale, $typeRowSpan, $gridRowHeight, $capHeight) < $fontSize: $typeSizeModifier * $baseFontSize; $lineHeight: $typeRowSpan * $gridRowHeight; $typeOffset: calculateTypeOffset($lineHeight, $fontSize, $descenderHeightScale); $topSpace: $lineHeight - $capHeight * $fontSize; $heightCorrection: 0; @if $topSpace >$gridRowHeight < $heightCorrection: $topSpace - ($topSpace % $gridRowHeight); >$preventCollapse: 1; font-size: #px; line-height: #px; transform: translateY(#em); padding-top: $preventCollapse; &::before < content: ""; margin-top: #<-($heightCorrection + $preventCollapse)>px; display: block; height: 0; > >
На первый взгляд, кажется, что этот код состоит из кучи каких-то волшебных чисел. Но будет намного проще его разобрать, представляя в контексте определенной системы. Давайте разберёмся в том, что нам необходимо знать:
- $baseFontSize : Это стандартный размер шрифта в нашей системе, вокруг которого будет выстраиваться всё остальное. Мы установим 16px как значение по умолчанию.
- $typeSizeModifier : Это коэффициент, применяемый к свойству font-size, который устанавливает правило размера шрифта. Например, если применить значение 2 к нашему стандартному размеру шрифта в 16px, то значение font-size будет равняться 32px.
- $descenderHeightScale : Это высота нижнего выносного элемента, выраженная в пропорции. Для шрифта Lato она составляет приблизительно 0,11.
- $capHeight : Это высота верхнего выносного элемента, выраженная в пропорции. Для шрифта Lato она равна примерно 0,75.
- $gridRowHeight : Системы вёрстки обычно опираются на вертикальный ритм, установленный по умолчанию, чтобы сделать процесс чтения приятным и равномерным. Например, все элементы страницы могут быть равноудалены друг от друга на величины, кратные четырём или пяти пикселям. Мы будем использовать значение 4, потому что оно хорошо делится на наш $baseFontSize, составляющий 16px.
- $typeRowSpan : Как и $typeSizeModifier, эта переменная служит коэффициентом для высоты ряда сетки и устанавливает правило высоты строки. Если по умолчанию величина ряда сетки равна 4, а в $typeRowSpan мы установим 8, то высота строки составит 32px.
Теперь мы можем вставить эти цифры в формулу Basekick, приведенную выше (с помощью функций и примесей SCSS). И это даст нам следующий результат:
Это именно то, что нам нужно. В любом наборе элементов текстовых блоков без отступов, два элемента будут касаться друг друга. В этом случае любой отступ между двумя объектами будет идеально соответствовать заданному количеству пикселей, потому что ему не придется конфликтовать с отступами линейных блоков.
Дорабатываем наш код
Вместо того чтобы запихивать весь наш код в одну SCSS примесь, давайте организуем его немного лучше. Если мы рассмотрим всё с точки зрения системы, то заметим, что существует три вида переменных, с которыми мы работаем:
| Тип переменной | Описание | Переменные @mixin (примеси) |
| Переменные системного уровня | Эти значения относятся к свойствам дизайнерской системы, с которыми мы работаем. | $baseFontSize $gridRowHeight |
| Переменные шрифта | Эти значения относятся к шрифту, который мы используем. Возможно, придется действовать методом проб и ошибок, чтобы получить идеально подходящие цифры. | $descenderHeightScale $capHeight |
| Переменные правила | Эти значения относятся к правилу CSS, которое мы создаем. | $typeSizeMultiplier $typeRowSpan |
Такой подход поможет нам лучше разобраться в нашей системе. Давайте рассмотрим каждую группу по очереди.
Начнем с того, что переменные системного уровня могут быть установлены как глобальные, потому что они вряд ли изменятся в течение работы над проектом. Это сокращает количество переменных в нашей основной примеси до четырёх.
$baseFontSize: 16; $gridRowHeight: 4; @mixin basekick($typeSizeModifier, $typeRowSpan, $descenderHeightScale, $capHeight) < /* То же самое, что сверху */ >
Мы также знаем, что переменные шрифта относятся только к заданному семейству шрифта. Это значит, что нам будет довольно просто создать примесь более высокого порядка, которая установит этим переменным постоянное значение:
@mixin Lato($typeSizeModifier, $typeRowSpan)
Теперь, на основе правила, мы без затруднений можем вызвать переменную Lato:
.heading—medium
В итоге мы получаем правило, которое использует шрифт Lato с размером 32px и межстрочным интервалом 40px, включающим в себя все соответствующие повороты и отступы. Это позволяет нам создавать простые правила стилей и использовать постоянство сетки, привычное дизайнерам, работающим с такими инструментами, как Sketch и Figma.
Как результат, мы можем без проблем создавать дизайны, идеально соответствующие указанному количеству пикселей. Посмотрите, насколько качественно приведенный ниже пример выравнивается по нашей 4-х пиксельной сетке (скорее всего, вам придется применить увеличение, чтобы увидеть сетку).
Этот способ даёт нам уникальную сверхспособность, когда дело касается вёрстки веб-страниц: Мы можем, впервые в истории, создавать страницы с идеальным соотношением пикселей. Совместив эту технику с некоторыми базовыми компонентами вёрстки, мы сможем начать создавать страницы так, будто работаем в дизайнерской программе.
Двигаемся к стандарту
Обучение CSS работать как дизайнерские программы требует некоторых усилий, однако на горизонте появилась потенциально хорошая новость. Было предложено дополнение для спецификации CSS, которое будет изначально переключать на такой режим. Предложение в своём нынешнем виде заключается в добавлении текстовым элементам дополнительного свойства, похожего на line-height-trim или leading-trim.
Наталья Кайда автор-переводчик статьи « How to Tame Line Height in CSS »
Как настроить высоту строки в CSS
От автора: CSS line-height — это, вероятно, один из самых неправильно понимаемых, но часто используемых атрибутов. Как дизайнеры и разработчики, когда мы думаем о line-height, мы можем представить концепцию направляющих в полиграфическом дизайне — термин, достаточно интересный, который происходит от буквального помещения направляющих между строками шрифта.
Направляющие и line-height, хотя и схожи, имеют некоторые важные различия. Чтобы понять эти различия, мы сначала должны немного больше понять типографику.
Обзор типографских терминов
В традиционном западном дизайне строка текста состоит из нескольких частей:
Базовая линия: это воображаемая линия, на которой находится текст. Когда вы пишете в блокноте с разметкой, базовая линия — это строка, на которой вы пишете.
Нижняя линия: эта линия находится чуть ниже базовой линии. Это линия, которой касаются некоторые символы — такие как прописные g, j, q, y и p.
Высота X: это (очевидно) высота обычной строчной буквы x в строке текста. Как правило, это высота других строчных букв, хотя некоторые из них могут иметь части символов, которые будут превышать x-высоту. Для всех намерений и целей, это считается воспринимаемой высотой строчных букв.
Высота заглавных букв: это высота большинства заглавных букв в данной строке текста.
Верхняя линия: линия, которая часто отображается чуть выше высоты заглавных букв, когда некоторые символы похожие на строчные буквы h или b могут превышать нормальную высоту заглавных букв.
Каждая из частей текста, описанных выше, является неотъемлемой частью самого шрифта. Шрифт разработан с учетом каждой из этих частей; тем не менее, есть некоторые части типографики, которые оставлены на усмотрение разработчика (как вы и я!), а не дизайнера. Одной из них является направляющие.
Направляющие определяют расстояние между двумя базовыми линиями в наборе текста.
Разработчик CSS может подумать: «Хорошо, направляющая — это высота строки, давайте двигаться дальше». Хотя эти два понятия взаимосвязаны, они также отличаются в некоторых очень важных аспектах. Давайте возьмем пустой документ и добавим к нему классический «сброс CSS»:
padding : 0 ;
Это удаляет поля и отступы для каждого элемента. Мы также будем использовать Lato от Google Fonts в качестве font-family. Нам понадобится некоторый контент, поэтому давайте создадим тег h1 с некоторым текстом и установим для его line-height что-то ужасно огромное, например 300px. В результате получается одна строка текста с удивительным количеством места над и под строкой.
Когда браузер обнаруживает это свойство line-height, он на самом деле берет строку текста и помещает ее в середину «строки», высота которой соответствует высоте строки элемента. Вместо того, чтобы устанавливать начальную строку для шрифта, мы получаем что-то похожее на заполнение одной из сторон строки.
Как показано выше, строковое поле оборачивается вокруг строки текста, где направляющие создаются с использованием интервала ниже одной строки текста и выше следующей. Это означает, что для каждого текстового элемента на странице в конкретном текстовом блоке будет половина первой строки над первой строкой текста и половина первой строки после последней строки текста.
Что еще более удивительно, так это то, что при явной установке элемента line-height и font-size для одного и того же значения будет оставлено дополнительное пространство над и под текстом. Мы можем увидеть это, добавив цвет фона к элементам.
Это связано с тем, что даже если для параметра font-size установлено значение 32px, фактический размер текста является чем-то меньшим, чем это значение из-за созданного поля.
Научить CSS рассматривать высоту строки как направляющие
Если мы хотим, чтобы CSS использовал более традиционный стиль установки шрифта вместо линейного блока, мы хотим, чтобы в одной строке текста не было места ни над, ни под ним, но чтобы многострочные элементы сохраняли свое полное значение line-height.
Направляющие можно задать в CSS довольно просто. Майкл Таранто выпустил инструмент под названием Basekick, который решает эту проблему. Это достигается путем применения отрицательного верхнего поля к псевдо-элементу ::before и translateY к самому элементу. Конечным результатом является строка текста без лишних пробелов вокруг нее.
Самую актуальную версию формулы можно найти в исходном коде для Системы проектирования Braid от SEEK. В приведенном ниже примере мы пишем миксин Sass, чтобы он выполнял вычисления, но ту же формулу можно использовать с миксинами JavaScript, Less, PostCSS или чем-то еще, что предоставляет такие математические функции.