Как установить межстрочный интервал в CSS
Всем добрый вечер, сегодня я хочу предложить вашему вниманию возможность, которую предоставляет нам язык CSS. А разберем с Вами, как установить межстрочный интервал в CSS. Все вы сталкивались при верстке с тем, что на макете, присутствует некоторый текст, определенного шрифта и размера, однако почему-то в макете его высота гораздо меньше, чем при вашей верстке. Вроде бы вы все правильно делаете, но не можете понять, в чем дело, а заказчик не принимает вашу работу. На помощь приходит css свойство line-height, отвечающее за межстрочный интервал. При регулировке данного свойства вы можете достичь нужного результата и в идеале, ваша верстка полностью совпадет с макетом.
Не будем много рассуждать, а перейдем к рассмотрению примера. Для этого напишем простой код:
<html>
<head>
<title>Межстрочный интервал</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="one-text">
<p>Обычный текст, без применения изучаемого свойства</p>
</div>
<div class="two-text">
<p>А вот к этому тексту мы применим изучаемое свойство, и вы увидите значительное отличие</p>
</div>
</body>
</html>
Пришло время применять css стили:
.one-text, .two-text {
float: left;
width: 200px;
}
.two-text p {
line-height: 15px;
}
Как видим, мы создали два блока, в которых поместили текст, задав при этом блокам фиксированную ширину и расположение блоков, друг напротив друга. И задаем для абзаца, который находится во втором блоке, css свойство line-height со значением равным пятнадцати пикселям. В итоге Вы сможете увидеть следующий результат на ваших экранах.
Даже визуально видно, что второй блок с текстом ужался и стал по высоте таким же, как и первый, и все благодаря тому, что мы установили межстрочный интервал в CSS. И напоследок прошу заметить, что в качестве значений могут выступать не только пиксели, Вы можете использовать величины, которые Вам необходимы, или если можно так выразиться, значение, которое больше вам нравится. На этом мы закончим рассмотрение данной темы, и завершим наш урок.
