Установить межстрочный интервал - PullRequest
128 голосов
/ 02 октября 2010

Как я могу установить межстрочный интервал с помощью CSS, как мы можем установить его в MS Word?

Ответы [ 8 ]

216 голосов
/ 02 октября 2010

Попробуйте свойство line-height .

Например, размер шрифта 12px и расстояние 4px от нижней и верхней линий:

line-height: 20px; /* 4px +12px + 4px */

Или с em единицами

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */
94 голосов
/ 19 июня 2013

Опоздал на эту вечеринку, но хотел добавить.

Вы также можете использовать значение без единиц измерения, которое представляет собой количество строк: line-height: 2; - это двойной интервал, line-height: 1.5; - это полтора и т. Д.

9 голосов
/ 04 марта 2015

Вы не можете установить интервал между абзацами в CSS, используя высоту строки, интервал между <p> блоками.Вместо этого устанавливается межстрочный интервал между строками, пространство между строками в блоке <p>.То есть line-height - это межстрочный интервал типографа в абзаце, управляемый line-height.

В настоящее время я не знаю ни одного метода в CSS, который бы создавал (например) интервал 0,15em между <p>, используя варианты em или rem для любого свойства шрифта.Я подозреваю, что это может быть сделано с более сложными поплавками или смещениями.Жаль, что это необходимо в CSS.

9 голосов
/ 07 ноября 2014

Если вам нужны сжатые линии, вы можете установить одно и то же значение для font-size и line-height

В вашем файле CSS

.condensedlines {              
    font-size:   10pt;
    line-height: 10pt;  /* try also a bit smaller line-height */
}

В вашем HTML-файле

<p class="condensedlines">
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
</p>

-> Играть с этим фрагментом на jsfiddle.net

Вы также можете увеличить line-height для контроля межстрочного интервала:

.mylinespacing {
    font-size:   10pt;
    line-height: 14pt; /* 14 = 10 + 2 above + 2 below */
}
8 голосов
/ 12 октября 2012

Попробуйте это свойство

line-height:200%;

или

line-height:17px;

используйте увеличение и уменьшение громкости

3 голосов
/ 02 октября 2010

Попробуйте line-height свойство;Есть много способов назначить высоту строки

3 голосов
/ 02 октября 2010

Я не уверен, что это то, что вы имели в виду:

line-height: size;
0 голосов
/ 05 июня 2019

lineSpacing используется в React Native (или в собственных мобильных приложениях).

Для веб-сайтов вы можете использовать letterSpacing (или letter-spacing)

...