Свойство line-height

Задает межстрочный отступ для текста

line-height: 1.5;
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Значения

line-height: normal;

Задает стандартный межстрочный отступ, зависит от браузера

<style>
.example-1 {
    font-size: 16px;
    line-height: normal;
}
</style>
<p class="example-1">Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Explicabo, deserunt, non, ratione illum
ipsa quis autem Voluptatum!</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, deserunt, non, ratione illum ipsa quis autem Voluptatum!

line-height: 1.5;

Задает межстрочный отступ относительно размера текста элемента. Значение 1 = размеру текста. Формула подсчета: line-height * font-size = line-height px, например 1.5*16 = 24px;

<style>
.example-2 {
    font-size: 16px;
    line-height: 1.5;
}
</style>
<p class="example-2">Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Explicabo, deserunt, non, ratione illum
ipsa quis autem Voluptatum!</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, deserunt, non, ratione illum ipsa quis autem Voluptatum!

line-height: 24px;

Задает межстрочный отступ в единицах: px, em, rem, vw, vh, %

<style>
.example-3 {
    font-size: 16px;
    line-height: 24px;
}
</style>
<p class="example-3">Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Explicabo, deserunt, non, ratione illum
ipsa quis autem Voluptatum!</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, deserunt, non, ratione illum ipsa quis autem Voluptatum!

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии