Встановити міжрядковий інтервал

145

Як я можу встановити міжрядковий інтервал за допомогою CSS, як ми можемо встановити його в MS Word?

css line

236

Спробуйте властивість висоти лінії .

Наприклад, розмір шрифту 12 пікселів та відстань 4 пікселів від нижньої та верхньої рядків:

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

Або з emодиницями

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */

— Маріо Сезар
джерело

10

Я виявив, що мені також потрібно, display: block;щоб ці налаштування були ефективними скрізь, а не лише вгорі та внизу абзацу.

— PatrickT

2

Пам'ятайте, що ви не можете встановити значення властивості висоти рядка під "1" або "100%", якщо ви встановлюєте його на елемент <a>. Якщо ви цього хотіли, ви можете встановити, наприклад, між текстом і <a>.

— raulchopi

2

він не працює з прольотом, тому що, як згадував @PatrickT, проміжок часу не відображається: block

— walv

1

@walv, це не припустимо. Так само, якщо вам потрібно використовувати його в прольоті, бажано використовувати display: inline-block, а не display: block.

— Маріо Сезар

1

@Userthatisnotauser, ви не можете подібне статися з користувачами, яким потрібно буде використовувати аплет java або веб-додаток, який вимагає ᴜᴅᴘ сокета (через втрату підтримки ɴᴘᴀᴘɪ і всі браузери вилучають підтримку у своєму користувальницькому плагіні) . Веб-сайт, присвячений місії Кассіні, все ще потребує швидкого підключення часу для перегляду їх відеоꜱ в Інтернеті. Не кажучи вже лише про ɴᴘᴀᴘɪ плагіни дозволяють переглядати стереоскопічне відео через стереоскопічні дисплеї в потоковому режимі. У моїй країні двом головним постачальникам телевізійних каналів все ще потрібен сріблястий світло з планами не модернізувати.

— користувач2284570

103

Ви також можете скористатись одиницею, меншою від одиниць, яка є кількістю рядків: line-height: 2;це подвійне проміжок, line-height: 1.5;дорівнює півтора і т.д.

— MikeTheLiar
джерело

Це не працює в опері, заснованій на Presto. Мені потрібно вирішити ... будь ласка! : \

— user2284570

Статус @user: працює на моїй машині. Ви спробували будь-яку з інших відповідей?

— MikeTheLiar

Я маю на увазі, що CSS-елемент розпізнається, але не впливає на результат візуалізації. Перевірено 12.16 та 12.50. Інша відповідь, в основному, однакова: ВСЕ РОБИТИ, щоб використовувати елемент висоти лінії!

— користувач2284570

@user Тому, що це ти робиш. Я б міг уявити, що це помилка браузера або відсутність підтримки цього правила CSS. Мабуть, слід задати його як окреме запитання.

— MikeTheLiar

Звичайно, запитання вирішення тут не є темою ... до речі, я бачив, як це впливає на інші бренди браузерів: вони існують, коли для цього параметра встановлено DOM або коли присутній contenteditable = "true".

— користувач2284570

12

Неможливо встановити між абзаци міжряддя в CSS, використовуючи висоту рядка, інтервал між блоками. Замість цього встановлюється міжрядковий інтервал між рядками, простір між рядками в блоці. Тобто висота рядка - це міжрядковий рядок друкарства, що веде в межах абзацу, керується висотою рядка.

В даний час я не знаю жодного методу в CSS для створення (наприклад) інтервалу між інтервалом 0,15em , використовуючи варіанти em або rem для будь-якої властивості шрифту. Я підозрюю, що це можна зробити за допомогою більш складних поплавків або зсувів. Шкода, що це потрібно в CSS.

— Томас Візель
джерело

7

Чи не можете ви використовувати для цього поля для інтервалу?

— Флімм

4

У деяких випадках margin-topта / або margin-bottomможе ефективно здійснити бажане тут.

— користувач1147171

10

Якщо ви хочете стислих ліній, ви можете встановити те саме значення для 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 */
}

— олібре
джерело

9

Спробуйте цю властивість

line-height:200%;

або

line-height:17px;

використовувати збільшення та зменшення гучності

— АНАНТ.С
джерело

@AVD: Це не працює в Opera, заснованій на Presto. Мені потрібно вирішити ... будь ласка! : \

— user2284570

4

Я не впевнений, чи це ви мали на увазі:

line-height: size;

— Алан Аггай Алаві
джерело

4

Спробуйте line-heightмайно; існує багато способів призначити висоту лінії

— Харша М.В.
джерело

1

Так, як всі кажуть, line-heightріч. Будь-який шрифт, який ви використовуєте, символом середньої висоти (наприклад, a або ■, не проходячи через верхній або нижній), повинен мати однакову довжину по висоті line-height: 0.6до 0.65.

<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa
</div>
<br>
<br>

<div style="line-height: 0.6; font-family: 'Fira Code', monospace, sans-serif">
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■
</div>
<br>
<br>
<strong>BUT</strong>
<br>
<br>
<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
ddd<br>
ƒƒƒ<br>
ggg
</div>

Розгорніть фрагмент

— РубенВерг
джерело

0

lineSpacing використовується в React Native (або в рідних мобільних додатках).

Для Інтернету можна використовувати letterSpacing(або letter-spacing)

— Ерік Кім
джерело