Вычислить маржу маржи по высоте

У меня есть основной текст с line-height: 22px, и я хочу использовать заголовок с line-height: 26px. Кроме того, я определяю margin-bottom: 18px, чтобы сохранить вертикальный ритм. Но если заголовок имеет две строки, его маржа должна быть пересчитана (в моем случае: 14 = 66-26*2).Вычислить маржу маржи по высоте

Если возможно, как выполнить его в чистом css?

Спасибо.

источник

2015-10-19 foo

Вы можете»вычислить с использованием чистого CSS, зависящего от размер элемента, поскольку этот размер динамически. Для этого вам нужен хотя бы JavaScript. – KittMedia

Невозможно иметь условные утверждения в CSS. Логика не поддерживается. Поэтому лучшее, что вы можете сделать, это функция JavaScript для управления логикой и добавление класса, если это необходимо. – Adjit

http://caniuse.com/#feat=calc Это может быть то, что вы хотели бы изучить. Calc может на самом деле сделать некоторую математику для вас, но это багги, как черт. –

Если у вас есть вопрос правильно, то верхние левые углы ваших контейнеров всегда должны быть 66px от предыдущего, независимо от содержания?

Затем просто укажите соответствующий контейнер на высоте 66px, без каких-либо ограничений?

h1 { 
    line-height:22px; 
    height:66px; 
    border: 1px solid red; /* visibility purpose */ 
    margin:0px; 
} 

<h1>foo</h1> 
<h1>bar<br/>baz</h1> 
<h1>foo</h1> 
<h1>foo</h1>

Это выглядит как «пересчитанные края» для второго заголовка. (Если границы я добавил для видимости цели будут удалены)

https://jsfiddle.net/qbvdorwn/

источник

2015-10-19 14:09:44 dognose

Спасибо за ответ, цель - заголовок, высота которого делится на базовую линию, независимо от содержания. Если заголовок содержит 1 строку - 'height: 26px; margin-bottom: 18px'. Если заголовок содержит 2 строки - 'height: 52px; margin-bottom: 14px' и так далее. – foo

Вычислить маржу маржи по высоте

ответ

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