Как правильно задать высоту строки?

Question

[Raneto4ka]

В хлебных крошках нужно корректно настроить отступы при переносе текста на маленьких экранах.
В данном примере https://codepen.io/Raneto4ka/full/yLNvVpo на xs экране длинный заголовок переносится на две строки, из-за чего смещается вверх и уменьшает отступ до верхней строки.
Мне нужно сделать так, что бы этот отступ всегда был одинаковый (11px). При этом учесть, что заголовок не обязательно будет длинным и вполне может умещаться в одну строку. Так что margin для li не решает эту проблему.

Comments

[Sergey]

не понял. по ссылке зашел через хром. ничего не смещается никуда ни в одну строку, ни в две строки.

Answer 1

[Алекс Глебов]

.breadcrumbs--how-to ul li {
    display: flex;
    /* height: 27px; */
    align-items: center;
    margin: 5px 0;
    /* margin-bottom: 0; */
}

Comments

[Антон Усачев]

Поаплодируем единственному человеку, который понял вопрос! (это не точно). Я семь раз прочитал и посмотрел, но так и не выявил сути.

Answer 2

[Одиночка Айс]

Для li задать нижний margin и убрать ему же фиксированную высоту

Да и к чему такая точность?

letter-spacing: -.2px;
font-size: .875rem;

Comments

[Raneto4ka]

Да и к чему такая точность?

Дизайн-система.
По этой же причине решение не подходит, тк если убрать высоту и задать нижний margin, то расстояние между строчками будет больше, чем нужно.

[Одиночка Айс]

Raneto4ka, вы в курсе что на вашу дизайн-систему плевать разным браузерам и ОС?

[Raneto4ka]

как бы да, но нет :)