Блог

Главная - Вопросы по программированию - высота строки: вывод, который не следует разделять до и после строки (для хорошей типографии)

высота строки: вывод, который не следует разделять до и после строки (для хорошей типографии)

#html #css

#HTML #css

Вопрос:

У меня сетка из двух столбцов. Размер шрифта в левой колонке и высота строки в два раза больше, чем в правой.

Идея такова: каждая вторая базовая линия справа совпадает с базовой линией левого столбца (для хорошей типографики).

Однако это не работает, потому что «высота строки» разделяет начало (промежуток между текстом) на до и после строки (в отличие от набора текста в начале).

Это могло бы сработать, если бы все начало было после или перед строкой, но как я мог это сделать?

Пример : 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>

Комментарии:

1. Привет и добро пожаловать в SO g0l4m, не могли бы вы предоставить скриншот желаемого результата?

2. конечно: bilder-upload.eu/upload/ce728b-1553777442.png здесь базовые линии совпадают

3. базовая линия не может совпадать. Я имею в виду, что тексты не могут быть расположены внизу одинаково. Из-за line-height . Первый div имеет line-height размер 36 пикселей, второй — 18 пикселей. Таким образом, «расстояние» сверху / снизу от текста в первом div больше, чем во втором. Поэтому они не выстраиваются в линию. Здесь вы можете лучше видеть, о чем я говорю jsfiddle.net/opdu9mzc Вы можете достичь желаемого, но не с высотой строки

4. Спасибо! но предполагались разные размеры. я хочу, чтобы каждая вторая базовая линия справа совпадала с базовой линией слева. как бы вы заархивировали его без высоты строки?

5. Единственный способ, который я смог придумать, это установить фиксированную высоту для вашего контента, а затем поиграть с align-items в настройках сетки. Второй в основном играет с margin и padding , это то, что я сделал в обоих этих jsfiddle jsfiddle.net/s0paxr4g (поля), jsfiddle.net/s0paxr4g/1 (заполнение)