Line-height: интерлиньяж не должен быть разделен до и после строки (для хорошей типографики)
У меня есть сетка из двух столбцов. Размер шрифта и высота строки в левой колонке в два раза больше, чем в правой.
Идея такова: каждая вторая базовая линия справа соответствует базовой линии левого столбца (для хорошей типографики).
Однако это не работает, потому что «высота строки» разделяет интерлиньяж (промежуток между текстом) на перед строкой и после строки (в отличие от набора текста).
Это может сработать, если весь интерлиньяж идет после или перед строкой, но как я могу это сделать?
Пример: https://www.bilder-upload.eu/upload/c7ce94-1553775633.png Вот как это должно выглядеть: https://bilder-upload.eu/upload/ce728b-1553777442.png
(Я попробовал это с другим полем левого столбца, но это не точно и немного неудачно. И для каждого шрифта свое другое значение, которое нужно угадать!)
.grid {
display: grid;
grid-gap: 0px;
grid-template-columns: 1fr 1fr;
}
.one,
.two {
line-height: 1;
}
.one {
font-size: 36px;
}
.two {
font-size: 18px;
}<body>
<div class = "grid">
<div class = "one">xxxxxxxxxxxxxxXx<br>xxxxxxxxxxxxxxXx</div>
<div class = "two">xxxxxxxxxxxxxxXx<br>xxxxxxxxxxxxxxXx<br>xxxxxxxxxxxxxxXx<br>xxxxxxxxxxxxxxXx</div>
</div>
</body>конечно: bilder-upload.eu/upload/ce728b-1553777442.png здесь совпадают базовые показатели
базовый уровень не может совпадать. Я имею в виду, что тексты не могут быть расположены внизу одинаково. Из-за line-height. Первый div имеет line-height 36 пикселей, второй — 18 пикселей. Таким образом, «расстояние» сверху/снизу от текста больше в первом div, чем во втором. Так они не выстраиваются. Здесь вы можете лучше понять, о чем я говорю jsfiddle.net/opdu9mzc Вы можете добиться того, чего хотите, но не с высотой строки
Спасибо! но разные размеры были предназначены. я хочу, чтобы каждая вторая базовая линия справа соответствовала одной слева. как вы его архивируете без высоты строки?
Единственный способ, который я мог придумать, — это установить фиксированную высоту для вашего контента, а затем поиграть с align-items в настройках сетки. Второй в основном играет с margin и padding, это то, что я сделал в обоих этих jsfiddle jsfiddle.net/s0paxr4g (margin), jsfiddle.net/s0paxr4g/1 (padding)
большое спасибо! я сделал это, используя padding-top. (надеюсь, когда-нибудь css позволит это сделать именно так :) line-height: 1 half-leading, line-height: 20px baseline-baselineline-height: 5px baseline-ascender или что-то в этом роде… en.wikipedia.org/wiki/Leading#On_the_World_Wide_Web )
Привет и добро пожаловать в SO g0l4m, не могли бы вы предоставить скриншот желаемого результата?