Css расстояние между строками: Как изменить расстояние между строками текста?

Важно знать: каждый шрифт — разный. Если контент выглядит странно и неуклюже — продолжайте его настройку. Самое главное, чтобы читателю и вашему собственному глазу было комфортно скользить по тексту.

Шаг 1 — Использовать текстовую иерархию, чтобы сделать понятную структуру страницы

Представьте учебник. В нем есть основной заголовок (название раздела), который более заметен, чем подзаголовок (название главы), который, в свою очередь, больше бросается в глаза, чем основной текст (основное содержание страницы). Эти же принципы следует брать во внимание при создании текстового Word-документа или во время дизайна.

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

1. Основной текст: увеличивайте или уменьшайте размер текста, до тех пор, пока не станет комфортно читать. Для этой статьи давайте установить размер шрифта 22pt
2. Основной заголовок: 180–200% основного текста, около 40–44pt
3. Подзаголовок: 130–150% основного текста, около 29–33pt

После того, как мы применили иерархию, страница стала выглядеть так:

Следует взять на заметку

Для нашей статьи нам не пригодились заголовок третьего уровня и текст для подписей, но будет полезно знать, как они задаются.

1. Заголовок третьего уровня: 100–125% основного текста, около 22–28pt
2. Подписи / мелкий текст: 70–75% основного текста, около 15–17pt

Шаг 2 — Используйте вертикальные отступы, чтобы было легче “сканировать” слова

Нам нужно убедиться, что у нас достаточный межстрочный интервал и вертикальный отступ между абзацами, чтобы глаза и мозг могли легко расшифровывать буквы, слова и формы слов.

Отступ между абзацами

Установить нужный отступ между абзацами легко, но не нужно делать это двойным нажатием клавиши “Enter”. Если вы сделаете отступ между абзацами дважды надавив на “Enter”, то у вас получиться слишком большой зазор между ними и будет сложно понять — продолжается старый абзац или уже начался абзац нового раздела.

В большинстве случаев, отступ между абзацами должен равняться высоте основного текста, то есть, если основной текст у вас равен 16pt, то 16pt должно быть и между абзацами.

• В дизайн-приложениях и CSS этот отступ задается через margin-bottom, равный 16pt или 1em.
• В текстовых редакторах, таких как Pages или MS Word, задайте значение “Отступа после абзаца”, равное величине вашего основного текста.

Межстрочный интервал

Межстрочный интервал следует устанавливать в размере 120–160% от размера основного текста. Как правило, чем меньше текст, тем более щедрым должен быть отступ между строками, чтобы позволить каждому слову дышать.

Лайфхак: вы должны свободно поместить букву “h”, лежащую на боку, между строками и не зацепить концы букв d/b/t (ascenders) и
p/q/y (descenders).

Если основной текст 22pt, тогда межстрочный интервал должен быть около 26–35pt.

• В CSS вы можете задать его с помощью em-ов или безразмерных величин (например 1.2, 1.1, 0.8 и т.д.), но это потребует тонкой настройки.
• В текстовых редакторах, таких как Pages или MS Word, межстрочный интервал задается десятичными значениями, — так, 1.2 будет равняться 120% от редактируемого текста.

Шаг 3 — Настройте меру каждой строки текста для более комфортного чтения

Мера — это длина строки текста. Длинные строки текста сложно читать, а вот с короткими намного легче. Идеальное количество символов в строке — 65-75. Мера должна определяться шириной основного текста, а не заголовка или подзаголовка.

Лайфхак: простой способ определить комфортную меру — это выстроить в одну линию заглавные буквы, строчные буквы , числа и отсчитать 62 символа.

АаБбВвГгДдЕеЁёЖжЗзИиЙйКкЛлМмНнОоПпРрСсТтУуФфХхЦцЧчШшЩщЪъЫыЬьЭэЮюЯя1234567890

Когда вы уже определили, сколько занимает 65–75 символам в одной строке, — начинайте уменьшать колонку текста, пока мера не станет достаточно комфортной.

Если вы следовали всем этим шагам, то читабельность вашего текста значительно возросла, что видно из картинки ниже.

Настройка размера шрифта — это не так уж сложно, достаточно следовать нескольким простым шагам, чтобы каждая частичка вашего контента легко считывалась. Сделайте эту часть работы во время подготовки вашего текста и читатели будут вам благодарны.

Это простой список шагов, который поможет улучшить текст ваших статей. Если хотите знать больше, то вам может быть интересен этот материал.

Шрифт расстояние между строками. Настройки в CSS: расстояние между строками

• Twitter

В CSS расстояние между строками задать очень просто. Для этого есть специальное свойство. Но, разумеется, есть и много других параметров, которые универсальны, и их можно применить к тексту.

Если никаких настроек не делать, то выставляются значения по умолчанию. При желании вы можете изменить это расстояние. Значение может быть как в процентном соотношении, так и в пикселях.

Высота строк

В CSS расстояние между строками можно продемонстрировать следующим рисунком.

На изображении выше указаны параметры с соответствующими расстояниями. Текст располагается в пространстве font-size. Обратите внимание, что линия текста начинается не на основании, а немного выше. Пространство ниже предусмотрено для букв, у которых есть элементы снизу (g, у и так далее).

Обратите внимание, что пространство между блоками font-size называется leading. В HTML и CSS это свойство никак не фигурирует, но оно есть в других графических и текстовых редакторах. Например, в Adobe Photoshop.

На рисунке выше указано, где в «Фотошопе» можно указать leading. А рядом указывается параметр font-size.

Примеры использования line-height

В CSS расстояние между строками можно задать процентами. Наглядный пример приведен ниже.

В случае маленького значения пользователю вашего сайта читать будет неудобно.

Расстояние можно менять и размером шрифта. Если разница между основными параметрами будет в цифрах сильно отличаться, то эта разница компенсируется увеличением leading.

Тонкости оформления

В CSS расстояние между строками можно дополнительно настраивать различными отступами. Рассмотрим пример на рисунке.

В поле «Элемент» в нашем случае будет текст. Padding — это отступ внутри объекта, а margin — отступ за объектом. Border — это рамка. Она может быть 0 пикселей, а может быть и 100.

На следующем изображении показаны сразу все отступы, рамка и высота линии текста.

Если у вас текст небольшой, всего в одну строку, или каждая строка в отдельном абзаце, то расстояние можно настраивать отступами между этими абзацами. То есть maring и padding между строчками в одном элементе не оказывают никакого влияния. Они создают отступы только по краям объекта. Объект — это весь абзац, а не строчки в нем. Здесь важно не запутаться.

В случаях, когда много строк, и всё это расположено в одном объекте, шрифт рекомендуется менять основными параметрами.

Как увеличить расстояние между строками CSS

Расстояние между строками HTML можно прописывать к какому-нибудь классу или для всех абзацев в тексте. Если вы укажете вот так: p { line-height:20px; }, — то абсолютно все абзацы на странице будут со строками размером 20 пикселей. Если нужно в разных местах различные размеры, то рекомендуется делать следующим образом.

Прописываем стили.

Class1 { line-height:20px; }

Class2 { line-height:16px; }

Class3 { line-height:12px; }

Для наглядности добавим рамку, чтобы вы увидели, что это работает. В дальнейшем ее нужно убрать.

Обратите внимание, что в третьем случае полоса наехала на текст. Всё из-за того, что больше, чем высота линии. Поэтому важно следить, чтобы таких противоречий не было. Если вы делаете маленькую высоту линии, то соответственно уменьшайте шрифт.

Не рекомендуется делать слишком маленький текст и маленькое расстояние между строками. Поскольку ни один пользователь не сможет спокойно всё это прочитать. У него быстро устанут глаза. Поисковые системы так же говорят, чтобы текст был удобным для пользователя.

Более того, в последнее время идет большой упор на удобство для мобильных пользователей. Там в рекомендациях всегда говорится, что размер шрифта должен быть нормальным, а не маленьким. Особенно сильно это влияет на ссылки. При их маленьком размере пользователю будет сложно использовать навигацию по сайту.

У поисковика «Гугл» есть специальный инструмент, который помогает в этом анализе. Он очень удобен для веб-мастеров.

Вот пример результатов, которые могут быть.

Рассматриваемые темы на этой странице:

Первое с чего нужно начать исследование вопроса расстояние между строк, это с того, что это такое и как это свойство применять и изменять!

Расстояние между строк определяет свойство:

Измеряется расстояние между строк: пикселями, процентами и если применялось выше к основному тексту свойство font-size, то em. (1 em равен одному цифровому значению font-size).

Теперь рассмотрим несколько примеров!

Создадим класс Primer-line-height? С высотой шрифта 17px и межстрочным расстоянием равным 1 em, а второй вариант, em увеличим в два раза!

Не забываем, совет, который есть на этой странице относительно стилей

p.Primer-line-height {
font-size: 17px;
line-height: 1em;
}

Этот текст написан с межстрочным расстоянием е равным одному em, что равно одному цифровому размеру «font-size», т.е.= 17px

p.Primer-line-height-1 {
font-size: 17px;
line-height: 2em;
}

Второй текст написан с межстрочным расстоянием е равным двум em, что равно двум размерам «font-size», т.е.= 2 х 17 = 34px

C общими понятиями и примерами разобрались, теперь перейдем к более интересному!

Теория – это конечно хорошо, но вот тут и начинается самое интересное! Применение теории к практике!

Маленькое отступление:

Я не буду вам рассказывать заново, про то, как мы,

И сейчас, собственно, читаете текст, уже на той изменённой странице.

Как уменьшить зазор между строк в Dreamweaver.

Возникла ситуация, когда нужно уменьшить расстояние между строк на нашей странице.

И тут вопрос, как собственно найти тот класс или id, который отвечает за тот стиль текста, который нам нужен, а нам нужен стиль текста, который вы читаете!!! В котором нам нужно изменить межстрочный интервал.

Для того, чтобы разобраться, мы возьмём в качестве примера данную страницу!

Для того, чтобы увидеть код данной страницы нажимаем ctrl + U ищем строчку 287 – это наши первые подозреваемые. Как я определил, что это именно это начало наших стилей, которые нас интересуют!?

После этой строки — №287 начинается основной текст. И он находится в дивах:

См.скрин:

Следующим шагом нужно разобраться с документом css. Опять же, если вы сейчас нажмёте ещё раз ctrl + U, то строчка 33 скажет нам, где находится документ css. Нам повезло, что документ css один. Если документов несколько, то прошерстить придётся все!

Вот эта строчка нас интересует! Из неё мы видим, что документ css находится в папке номер 1969, и ищем файл style5. (можно и на этот )

Открываем файл style5, нажимаем ctrl + F(поиск) и вставляем туда rightPan нажимаем найти далее.

Вот мы видим, что наш id – rightPan. Но выделенный стиль синим – это описание самого id, но нам нужен следующий стиль

И интересующаяя нас строчка, которая и указывает на межстрочное расстояние:

line-height: 1em;

См.скрин:

Второй вариант:

Как уменьшить расстояние между строк.

Теперь мы будем использовать бесплатную программу В качестве редактора кода.

Не все хотят использовать программу Dreamweaver, но нам, в любом случае требуется поиск, конечно, он есть и в простом блокноте, но я, все же, предпочитаю профессиональный инструмент, чего и вам советую!

Как мы выше писали, первое, что нам нужно найти, это где располагается основной текст, и где описано наше расстояние между строк.

Для примера, опять же рассмотрим эту страницу!

В любом браузере есть такая вещь, как — просмотр кода элемента! Используемый браузер Яндекс браузер(в опере также). Выделяем часть текста, в котором нужно изменить межстрочное расстояние. Нажимаем ПКМ , ищем строку просмотр кода элемента.

1. Выделенный текст.
2. Слева – где находится.
3. Стиль, который прикреплён к выделенному тексту.

Для того, чтобы увидеть полную страницу, я сделал сохранил его в большом размере –

line-height: 1em;

И меняем цифровое значение на то, которое мы хотим!

Обработка пробелов между буквами и словами

1. Расстояние между словами word-spacing

Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.

На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине. Наследуется.

Синтаксис

P {word-spacing: normal;} p {word-spacing: 2px;}
Рис. 1. Расстояние между словами

2. Расстояние между буквами letter-spacing

Свойство устанавливает расстояние между буквами (величину трекинга) и символами. Может принимать положительные и отрицательные значения. Целесообразно применять для повышения выразительности и читаемости заголовков, определений и пр. Наследуется.

Синтаксис

P {letter-spacing: normal;} p {letter-spacing: 2px;}
Рис. 2. Изменение расстояния между буквами с помощью свойства letter-spacing

3. Обработка пробелов white-space

Свойство обрабатывает пробелы между словами и переносы строк внутри элемента. Не наследуется.

white-space
Значения:
normal	Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости.
nowrap	Запрещает переносы строк, за исключением применения .
pre	Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк.
pre-wrap	Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо.
pre-line	Удаляет лишние пробелы, за исключением случаев .
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

P {white-space: normal;} p {white-space: nowrap;} p {white-space: pre;} p {white-space: pre-wrap;} p {white-space: pre-line;}

4. Настройка табуляции tab-size

Для изменения величины отступа, получаемого с помощью клавиши ТAB, используется свойство tab-size . Значения свойства игнорируются, когда установлено одно из трёх значений pre-line , normal или nowrap свойства white-space .

Работает только для элементов и

Для остальных блочных элементов значение всегда будет равно единице. Значения свойства, указанные в единицах длины, поддерживается только в Chrome 42+.

Синтаксис

Pre {-moz-tab-size: 16;} /* Firefox */ pre {-o-tab-size: 16;} /* Opera 10. 6-12.1 */ pre {tab-size: 16;}

Чтобы изменить расстояние между строками в HTML , вам не нужно забивать шпоны. Вам нужно всего лишь к объекту, в котором вы хотите это расстояние отрегулировать, например, к абзацу текста (тег ) или к блочному элементу (

), применить CSS-свойство line-height . Свойство может применяться ко всем тегам HTML .

Значение у line-height можно задавать в процентах, множителем, единицами измерения (пиксели (px), пункты (pt), пайки (pc) и т.д.), а также оно может принимать значение normal и inherit.

При normal расстояние между строками вычисляется браузером автоматически по своим соображениям, при inherit — наследуется значение родительского элемента, т.е. тега, в который данный тег вложен.

Черкнем несколько строк на HTML.

Вот так выглядит в браузере расстояние между строками в абзаце со значением 1 (т.е. одинарный интерлиньяж) и 70% у заголовка (заметьте что при расчете в % за 100% берется высота шрифта):

Если мы зададим line-height для тега

, окутывающего и заголовок, и абзац, а у них, соответственно, это свойство уберем, то получится:

Если мы поставим line-height = 0. 4, получится экспонат отрицательного интерлиньяжа:

Зачем же вообще с расстоянием между строками что-то делают? Из-за вредности? От нечего делать?

Правильно подобранное расстояние между строками может повысить читабельность текста, а это очень важный аспект в веб-дизайне, в книгопечатании и во всем, что связано с текстом. Согласитесь, что когда мы во втором примере увеличили расстояние между строками, текст стало приятнее читать, не так ли? Но это совсем не значит, что чем больше интерлиньяж, тем выше удобочитаемость текста. После какого-то определенного момента строки начинают слишком далеко стоять друг от друга, глазу становится труднее переходить от одной к другой, и при чтении возникает дискомфорт. Помните о золотой середине.

Множество людей, включая дизайнеров, думают, что типографика – это только выбор гарнитуры, размера шрифта и того, должен ли он быть нормальным или полужирным. Для большинства людей на этом все и заканчивается. Но для получения хорошей типографики нужно гораздо больше и как правило это детали, которые дизайнеры часто игнорируют.
Эти детали дают дизайнеру полный контроль, позволяет ему создавать прекрасные и последовательные с точки зрения типографики решения в дизайне. Хотя все это применимо для различных типов носителей, в этой статье мы сосредоточимся на том, как их применить к веб-дизайну с использованием CSS. Вот 8 простых путей с помощью CSS улучшить типографику и, следовательно, общее удобство дизайна.

Размер наборной строки. Для глаза читателя, длинные или короткие строки утомительны. Длинные – разрушают ритм, так как читателю трудно найти следующую строку текста. Единственная ситуация, в которой приемлемы короткие строки – малое количество текста. Для наилучшей читабельности длина строки должна быть между 40 и 80 символами, включая пробелы. Для дизайна с одной колонки текста 65 символов – идеальны.

Простой способ вычислить длину строки – использовать метод Роберта Брингхарста (Robert Bringhurst’s), который умножает размер шрифта на 30. То есть, если размер шрифта 10px, умножая его на 30 получим 300px или, приблизительно, 65 символов в строке. Код будет выглядеть приблизительно как:
p {
font-size: 10px;
max-width: 300px;
}
Я использую px так как это значительно упрощает расчеты, но можно использовать и em.

Интерлиньяж это пространство между строками текста в теле заметки и оно играет большую роль для читабельности. Правильное разделение строк, позволяет читателю проще следить за строкой и улучшает внешний вид текста. Интерлиньяж так же изменяет типографический цвет текста, который является плотностью или же тоном композиции.
На интерлиньяж влияет множество факторов: гарнитура, размер шрифта, его полнота, обстоятельства(?) , длина строки, расстояние между словами и т.д. Чем длиннее строка, тем больше интерлиньяж. Чем больше размер шрифта, тем меньше интерлиньяж. Хорошее правило – устанавливать интерлиньяж на 2-5pt больше, чем размер шрифта , в зависимости от гарнитуры. Так что если шрифт 12pt, то для веб интерлиньяж должен быть в 15pt или 16pt.

Определение верного интерлиньяжа требует определенной ловкости, но ниже приведен пример того, на что должен быть похож ваш код:
body {

font-size: 12px;
line-height: 16px;
}

Обработка кавычек должна проводиться на полях текста. Если кавычки сливаются с текстом, то они разрывают левое поле и нарушают рифму блока текста. Обработка кавычек не нарушает выравнивания по левому краю и баланса и поэтому – улучшает читабельность.

Это легко достигается с помощью CSS, используя элемент blockquote:
blockquote {
text-indent: -0.8em;
font-size: 12px;
}

Отрицательный отступ будет зависеть от гарнитуры, размера шрифта и полей.

Сетка базовых линий это основа постоянного типографического ритма на странице. Он позволяет читателям легко следить за текстом, что в свою очередь увеличивает читабельность. Постоянный ритм в вертикальном пространстве удерживает текст на постоянной сетке так, что пропорции и баланс сохраняются неизменными по всей странице вне зависимости от размера шрифта, интерлиньяжа или длинны строки.

Для того что бы поддерживать вертикальный ритм с помощью CSS, нужно, что бы расстояние между элементами и межстрочное расстояние (интерлиньяж) был равен размеру сетки базовых линий. Допустим, вы используете 15px сетку базовых линий , подразумевая, что между каждой линией сетки 15px. Интерлиньяж будет 15px и расстояние между параграфами тоже будет 15px. Вот пример:
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
}

P {
margin-bottom: 15px;
}

Это позволяет каждому параграфу располагаться на сетке, сохраняя вертикальный ритм текста.

Верхняя висячая строка — строка текста или слово в конце параграфа. Нижняя висячая строка — слово или короткая строка текста в начале или конце колонки, которая отделена от всего остального текста. Верхние и нижние висячие строки образуют неуклюжие куски, прерывают взгляд читателя и влияют на читабельность. Этого можно избежать увеличив размер шрифта, интерлиньяж, длину строки, расстояние между словами и межбуквенное расстояние или вводя вручную разрывы строки.

К несчастью, нет простого способа предотвратить висячие строки с помощью CSS. Один из способов от них избавится был описан выше, еще один — jQWidon’t , плагин для jQuery, который размещает неразрывные пробелы между последними двумя словами элемента.

Важно выделять слова не отвлекая читателя . Курсивное начертание часто рассматривается как идеальная форма выделения. Некоторые другие распространенные формы выделения: полужирное начертание, заглавные буквы, капитель, размер шрифта, цвет, подчеркивание или другая гарнитура. Не важно, какой вы воспользуетесь, постарайтесь использовать только одну. Такие комбинации как капитель – полужирное – курсивное начертание отвлекают и смотрятся неуклюже.

Вот несколько способов выделения с помощью CSS:
span {
font-style: italic;
}

h2 {
font-weight: bold;
}

h3 {
text-transform: uppercase;
}

B {
font-variant: small-caps;
}
Имейте в виду, что font-variant работает только в случае, если шрифт поддерживает капитель.

В случае HTML-документов теги работают больше на разметку контента, чем на указание того, как он должен быть представлен. Больший контроль над представлением достигается с помощью стилей. В этой статье я рассмотрю те стили, которые связаны с форматированием абзаца в HTML .

Тег

В HTML позволяет задать абзацы, а атрибут align выравнивает их по левому краю, по правому краю, по центру или по ширине. Помимо них мы будем использовать глобальный атрибут style .

Выравнивание абзаца

Можно выровнять абзац, используя атрибут align со следующими значениями:

text-align: left|right|center|justify|initial|inherit;

Скопируйте следующий код в файл .html .

Этот абзац выровнен по центру

Этот абзац выровнен по правому краю

Этот абзац выводится в окне браузера, выровненным по ширине. Распределенный по ширине абзац выравнивается по правому и по левому краю за счет добавления дополнительных пробелов. Вы можете видеть, что края выровненного по ширине абзаца соответствуют краям абзацев, выровненных по левому и по правому краю. В выровненном по левому краю абзаце левый край является ровным, а в абзаце, выровненном по правому краю — правый. Вы видите, что у этого абзаца оба края являются ровными? Это достигается благодаря стилю text-align:justify.

В окне браузера HTML код абзаца выглядит следующим образом.

Интервалы между строками

Вы можете управлять междустрочным интервалом абзаца с помощью style=line-height . Используйте атрибут style со следующими значениями:

line-height: normal|number|length|initial|inherit;

Ниже приведен пример HTML-кода , который выводит абзацы с различными междустрочными интервалами:

В этом параграфе используются два значения для атрибута style. Первый line-height:1.5 определяет полуторный междустрочный интервал для абзаца, а второе значение text-align:justify определяет, что текст абзаца должен распределяться по ширине.

Этот абзац имеет двойной междустрочный интервал и выровнен по ширине. line-height:2 определяет двойной интервал. Атрибут style не обязательно должен иметь два значения. Но если вам нужно задать два значения, вы можете сделать это, разделив их точкой с запятой.

Ниже приведено несколько различных способов использования значения line-height для атрибута style :

: Устанавливает межстрочный интервал 13 пикселей;

: Устанавливает в HTML расстояние между абзацами в 200% относительно текущего размера шрифта;

: Устанавливает высоту строки 14 пикселей.

Отступы

Я использовал термин »отступы «, чтобы его было проще понять. Но в HTML мы используем промежутки, чтобы создать вокруг объекта пустое пространство. Можно использовать атрибут style со значением padding , чтобы задать для абзаца отступ слева или справа.

Ниже приводится пример абзацев с отступом слева и справа:

Этот абзац не имеет отступа, он просто выровнен по ширине. Посмотрите на атрибут style элемента P для этого абзаца.

Для этого абзаца я задал отступ слева в 30 пикселей с помощью стиля padding-left:30px. Также этот абзац выровнен по ширине с помощью стиля text-align:justify. Как вы уже знаете, мы можем использовать несколько значений для атрибута Style, разделяя их точкой с запятой.

А этот абзац имеет отступ справа в 30 пикселей, но не имеет отступа слева. Он также выровнен по ширине. Значение ‘padding-right’ атрибута style задает отступ справа. Если вы не видите эффекта, уменьшите ширину окна браузера, чтобы абзац HTML, выровненный по ширине, отображался надлежащим образом.

Отступы между абзацами (отступ перед и отступ после абзаца)

В HTML или CSS нам это не нужно. Мы можем просто указать стиль padding для элемента

Padding-top и padding-bottom задают пустое пространство до и после абзаца, которое работает, как отступ сверху или снизу. Посмотрите на приведенный ниже пример тега

Я установил для первого абзаца HTML отступ 10 пикселей перед вторым и 50 пикселей после второго абзаца:

Для этого абзаца не заданы отступы до или после. Это обычный абзац, выровненный по ширине. Как вы уже знаете, мы можем выровнять абзац по ширине с помощью кода style=”text-align:justify” внутри тега.

Этот абзац выронен по ширине. Он также имеет отступ в 10 пикселей перед абзацем и 50 пикселей после. Внутри тега я задал 3 стиля.

Это обычный абзац без отступов и с выравниванием по умолчанию.

Что следует помнить

• Абзац HTML может быть выровнен с помощью атрибута align или стиля text-align ;
• HTML будет отображаться по-разному в зависимости от размеров экрана, размеров окна браузера;
• Добавление дополнительных пробелов или пустых строк в HTML-код не влияет на вывод. Браузер удаляет все лишние пробелы;
• Теги задают, что должно отображаться, а стили определяют, как это должно выводиться;
• Стили могут быть заданы тремя различными способами — встроенные (внутри тегов ), внутренние (внутри того же HTML-файла с помощью элемента
• Лучшей практикой при разработке веб-сайтов считается использование внешнего файла CSS . Таким образом, мы можем разделить контент и представление;
• Style является глобальным атрибутом, поэтому его можно использовать с любыми другими элементами, а не только с элементом

  ;

• Стиль text-align выравнивает абзац по левому краю, по центру, по правому краю или по ширине;
• Междустрочный интервал для абзаца можно задать с помощью стиля line-height . Он может принимать различные значения;
• Вы можете указать для line-height кратные значения (1 для одинарного междустрочного интервала, 1,5 для полуторного, 2 для двойного, 3 для тройного и так далее ), а также пиксели, проценты и т.д.;
• Отступ для абзаца в HTML можно задать с помощью стиля padding-left или padding-right . Может принимать значения в пикселях, процентах и т.д.;
• Интервалы между абзацами в HTML можно задать с помощью стилей padding-top или padding-bottom . Для этого также допустимы значения в пикселях, процентах и т.д.

Перевод статьи «HTML Paragraph Formatting » был подготовлен дружной командой проекта

Свойство высоты строки CSS

❮ Пред. Следующий ❯

Свойство line-height определяет высоту строки. Возможны три ситуации:

• В элементах блочного уровня свойство line-height указывает минимальную высоту строк строковых блоков в элементе.
• Для незаменяемых встроенных элементов свойство line-height указывает высоту, которая используется при расчете высоты строки.
• При замене встроенных элементов, таких как кнопки или другие элементы ввода, свойство line-height не влияет.

Допустимы отрицательные значения.

Высота строки по умолчанию составляет от 110% до 120% для большинства браузеров.

Свойство line-height задает интерлиньяж строк текста. Если значение высоты строки больше, чем значение размера шрифта элемента, разница будет заключаться в интерлиньяже текста.

Свойство line-height не действует при применении к встроенным элементам: изображениям, кнопкам и т. д.

 line-height: normal | номер | длина | начальная | наследовать; 

Пример свойства line-height:

 

  <голова>
    
    <стиль>
      дел {
        высота строки: нормальная;
      }
    
  
  <тело>
     
Пример свойства Line-height
 
     
высота строки: обычная (по умолчанию)
 
    
Это абзац со стандартной высотой строки. 
      
 Стандартная высота строки в большинстве браузеров составляет от 110% до 120%.
    
  
 

Попробуй сам »

Результат

Пример свойства line-height со значением «длина»:

 

  <голова>
    
    <стиль>
      дел {
        высота строки: 10 пикселей;
      }
    
  
  <тело>
     
Пример свойства Line-height
 
     
высота строки: 10 пикселей
 
    
Это абзац с заданной высотой строки.
      
 Высота строки здесь установлена ​​на 10 пикселей.
    
  
 

Попробуй сам »

Пример свойства line-height со значением «процент»:

 

  <голова>
    
    <стиль>
      дел {
        высота строки: 200%;
      }
    
  
  <тело>
     
Пример свойства Line-height
 
     
высота строки: 200%
 
    
Это абзац с большей высотой строки. 
      
 Высота строки здесь установлена ​​на 200%.
    
  
 

Попробуй сам »

Пример свойства line-height со всеми значениями:

 

  <голова>
    
    <стиль>
      div.a {
        высота строки: 1;
      }
      div.b {
        высота строки: 50px;
      }
      div.c {
        высота линии: 0,5 см;
      }
      div.d {
        высота линии: 1 см;
      }
      div.e {
        высота строки: 200%;
      }
      div.f {
        высота строки: нормальная;
      }
    
  
  <тело>
     
Пример свойства Line-height
 
     
высота строки: 1
 
    
Это абзац с заданной высотой строки.
      
 Высота строки здесь установлена ​​равной 1.
    
     
высота строки: 50 пикселей
 
    
Это абзац с заданной высотой строки.
      
 Высота строки здесь установлена ​​на 50 пикселей.
    
     
высота линии: 0,5 см
 
    
Это абзац с заданной высотой строки. 
      
 Высота строки здесь установлена ​​равной 0,5 сантиметра.
    
     
высота строки: 1 см
 
    
Это абзац с заданной высотой строки.
      
 Высота строки здесь установлена ​​равной 1 сантиметру.
    
     
высота строки: 200%
 
    
Это абзац с большей высотой строки.
      
 Высота строки здесь установлена ​​на 200%.
    
     
высота строки: нормальная
 
    
Это абзац со стандартной высотой строки.
      
 Стандартная высота строки в большинстве браузеров составляет от 110% до 120%.
    
  
 

Попробуй сам »

Свойство line-height можно использовать для создания различных интересных стилей. Например, вы можете использовать свойство line-height, чтобы придать каждой строке текста свой цвет. Здесь вы можете использовать линейный градиент () с цветовыми точками. Или вы можете использовать это свойство для размещения линий между текстами с помощью Repeating-linear-gradient().

Расстояние между абзацами « Fonts.com

J

Джейсон Целентис в Учеба 25 января 2017 г.

Как веб-дизайнер, считаете ли вы абзацы чем-то само собой разумеющимся? Не прилагая особых усилий для их разработки? Используете любой встроенный формат параграфа

, предоставляемый вашей системой управления контентом? Полагаетесь на значения по умолчанию вашего веб-редактора WYSIWYG? Что еще хуже, почти ничего не делать и надеяться, что браузер позаботится об этом за вас? Если вы ответили Да на любой из вышеперечисленных вопросов, то пришло время более внимательно изучить интервал между абзацами.

Развлечение в абзацах Основы

Прошлые сообщения в Основы веб-типографики рассматривали настройку начальных заглавных букв в первой, второй и третьей частях серии.

В другом посте исследуется установка первой строки или строк вашего абзаца в верхнем регистре.

В то время как эти посты показали вам, как добавить изюминку к вашим абзацам, этот охватывает структурные основы. Интерлиньяж, поля и отступы влияют на построение и размещение абзацев. Макет абзаца важен, когда речь идет о привлечении читателей, предоставляя им привлекательный и приятный опыт онлайн-чтения. Более того, как только вы поймете основы абзаца, это сделает такие задачи, как начальные буквы, еще более полезными на этапе проектирования.

Настройка интерлиньяжа и полей

Если интерлиньяж абзаца или межстрочный интервал, известный как line-height в CSS, слишком мал, это делает макет менее привлекательным. Текст выглядит плотным и, как следствие, подавляющим. Настройки абзаца по умолчанию, созданные с использованием HTML, системы управления контентом или веб-редактора, могут привести к переполнению интерлиньяжа.

Самая большая проблема в приведенном выше примере? Высота строки . Поскольку это не было указано в CSS, браузер использует настройку по умолчанию, и расстояние по вертикали между каждой строкой текста кажется слишком маленьким. В редакции ниже font-size:1.6em с line-height:2.2em открывает все, добавляя больше воздуха.

Хотя в исправленном примере выше два абзаца четко разделены, разрыв между ними не так заметен, как мог бы быть. Как и в программах верстки для печати, вы можете добавить пространство между абзацами, используя margin-bottom или margin-top в вашем CSS, используемые ниже в элементе абзаца.

размер шрифта: 1,6 em; высота строки: 2.2em; нижняя граница: 2.2em;

Сравните разницу между абзацем без дополнительного пробела (внизу слева) и с добавленным margin-bottom между абзацами (внизу справа). Каждый абзац справа теперь более заметен сам по себе.

В приведенных выше примерах шрифт Georgia® с его большой высотой x работает с установленной высотой строки . Но переключение и использование шрифта Minion® Pro с тем же размером шрифта , размером и высотой строки дает разные результаты. В приведенных ниже примерах сравните Georgia слева и Minion Pro справа.

Различия невелики, но копия, установленная в шрифте Minion, кажется меньше, и в результате та же высота строки , используемая для интерлиньяжа, делает макет более воздушным. Это может быть повод для ужесточения высоты строки Minion , чтобы уменьшить расстояние. Или вы можете оставить все как есть, сделав строки абзаца открытыми.

В качестве другого примера рассмотрим шрифт Perpetua®, установленный в том же размер шрифта и высота строки в качестве предыдущих примеров. Несмотря на ту же систему размеров, что и у Джорджии и Миньона, макет Перпетуи справа выглядит иначе. Даже с тем же line-height набор шрифтов Perpetua кажется еще более воздушным, с большим пустым пространством между каждой строкой.

Несмотря на открытую высоту строки, если используется Perpetua, его будет труднее читать при этом размере шрифта и, вероятно, его следует увеличить с высотой строки скорректировано соответствующим образом.

Будь то размер шрифта или высота строки или даже поля абзаца, один размер , а не подходит для всех шрифтов. Разные шрифты дают разные результаты. Некоторые шрифты будут иметь больше интерлиньяжа, в то время как другие будут казаться плотно установленными. Хотя правило установки line-height на 120% размера шрифта является обычной практикой, проведите тестирование с каждым шрифтом, который вы используете на разных устройствах и в разных браузерах, а также на разных размерах экрана, прежде чем остановиться на типографской системе размеров. .

Определение абзацев с помощью отступов

Четко разделенные абзацы помогают пользователю просматривать, читать и просматривать содержимое. Когда они закончат читать один абзац, они смогут найти следующий и двигаться дальше. Пробелы между абзацами — один из способов создать эти подсказки.

Но есть еще один вариант, который многие читатели привыкли видеть в полиграфическом дизайне, особенно в книжном: текстовые отступы. В программах обработки текста для создания этих отступов используются табуляции, а в CSS вы используете отступ текста .

Отступы удобны при установке больших объемов контента, когда читатель прокручивает текст для перемещения по тексту. Обычно начальный абзац не нуждается в отступе, и именно в этом первом абзаце вы можете использовать монументальную типографику, например начальные буквы.

У вас может быть отдельный класс для ваших абзацев с отступом, позволяя установить начальный и абзац без отступа на , а не в этом классе с отступом.

p {семейство шрифтов:Georgia, Times, serif; размер шрифта: 1.6em; высота строки: 2.2em; margin:0;}

.indented {text-indent: 3em;}

В этом отступе не будет.

Этот абзац будет с отступом .

Или вы можете использовать псевдокласс, чтобы иметь более эффективный HTML, свободный от использования class="indented" во всем бэкенде. : первый ребенок Псевдокласс CSS делает первый абзац без отступа, а все последующие абзацы имеют отступ.

p {семейство шрифтов: Джорджия, Times, "Times New Roman", с засечками; размер шрифта: 1.6em; высота строки: 2.2em; маржа: 0; text-indent: 3em;}

p:first-child {text-indent:0;}

В этом отступе не будет отображаться, потому что это первый дочерний элемент.

Этот абзац будет иметь отступ.

Поле абзаца , показанное в CSS выше и установленное на 0 , стягивает абзацы вместе, создавая книжный макет, который читатели узнают по печатному дизайну. Он также учитывает пространство, делая веб-макет более мелким и требующим меньше прокрутки.

Маленькие абзацы имели значение, когда меньше места означало меньше бумаги и меньше денег. Но этот ход мыслей не обязательно применим, когда речь идет о веб-типографике. Вы можете добавить небольшое пространство, чтобы добавить больше пространства между абзацами, а также использовать отступы. В приведенном ниже примере изменения поле:0 от до поле-нижнее:1em .

Сравните два ниже.

На другом конце спектра отступов находятся отступы. Хотя это и необычно, выступы — иногда называемые выступами или висячими отступами — также обозначают абзацы. В CSS отрицательный text-indent создает эффект, а text-indent:-2em используется в примере ниже.

Правильный интервал

Создавайте свои абзацы с нуля, используя интерлиньяж и поля, чтобы разбивать текстовое содержимое на небольшие привлекательные пакеты. И не бойтесь использовать отступы, так как читатели привыкли видеть их в печатном виде, что делает макет похожим на книгу в Интернете. Выступы — это необычный способ определения абзацев, но они могут создать уникальную и запоминающуюся композицию, при условии, что это подходит как для вашего дизайна, так и для ваших читателей.

Строка, поля и отступы являются строительными блоками абзаца. Используйте эти элементы интервала, чтобы пригласить читателя, чтобы он взаимодействовал с контентом. Правильный интервал может означать разницу между сохранением читателей или их потерей, и последнее, чего вы хотите, — это чтобы ваши читатели уходили куда-то еще. Джейсон Целентис — дизайнер, писатель и педагог. В качестве адъюнкт-профессора факультета дизайна Уинтропского университета он преподает дизайн визуальных коммуникаций, стратегию и развитие бренда, веб-дизайн и типографику. Его работы о дизайне и визуальной культуре появились в Arcade , Eye , mental_floss , Open Manifesto , Print и HOW . Он пишущий редактор журнала Print . На счету г-на Целентиса также четыре книги по принципам дизайна и типографики, а также по истории дизайна.

Начните бесплатную подписку на веб-шрифты fonts.com сегодня

Начните подписку

Найдите свой шрифт

• О
• Блог
• Средства шрифтов
• Услуги
• Отправить шрифты
• Стать партнером
• Поддержка
• Контакт
• Разработчики

• Монотип
• Юридический
• Карта сайта
• Индекс шрифта

• Монотип
• Юридический
• Карта сайта
• Индекс шрифта

Высота строки CSS: практическое руководство

Джеймс Галлахер — 29 декабря 2020 г.

Свойство CSS line-height определяет высоту строки различных элементов HTML. Он обычно используется для установки расстояния между строками текста. Высота строки может быть установлена ​​с помощью ключевых слов, процентов или числовых значений.

Свойство CSS line-height позволяет разработчикам определять расстояние между двумя встроенными элементами на веб-странице. Разработчики часто используют свойство CSS line-height для увеличения или уменьшения расстояния между строками текста на веб-странице.

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

Найдите свой матч для буткемпа

• Career Karma подберет для вас лучшие учебные курсы по технологиям
• Получите доступ к эксклюзивным стипендиям и подготовительным курсам

Выберите свой интерес
{% if page_url == «лучшие проверенные учебные курсы по науке о данных и аналитике» %} Наука о данных Аналитика данных Программная инженерия {% еще %} Программная инженерия Наука о данных Аналитика данных {% конец%} Дизайн Продажи Кибербезопасность Цифровой маркетинг Имя

Фамилия

Эл. адрес

Номер телефона

Продолжая, вы соглашаетесь с нашими условия обслуживания а также Политика конфиденциальности , и вы соглашаетесь получать предложения и возможности от Career Karma по телефону, текстовым сообщениям и электронной почте.

Высота строки CSS

Свойство CSS line-height задает высоту строки. Линейные блоки — это строки, из которых состоит поле в CSS . Этот метод часто используется для установки расстояния между строками текста.

Регулировка высоты строки позволяет косвенно регулировать расстояние между строками текста (или другими элементами) на веб-странице. Это очень похоже на форматирование текста в Microsoft Word с двойным интервалом или 1,15 интервалом.

Синтаксис свойства line-height CSS следующий:

 высота строки: высота строки; 

«lineHeight» относится к значению длины, которое устанавливает высоту строки элемента.

Три типа значений, которые вы можете использовать со свойством line-height: длина, число и процент:

Кроме того, вы можете указать ключевое слово «обычный». Это ключевое слово указывает использование браузера по умолчанию. Это значение обычно составляет около 1,2, в зависимости от того, какой браузер использует зритель.

Если вы примените свойство высоты строки к блоку, весь текст в этом блоке будет использовать указанную вами высоту строки.

Примечание о доступности

Изменение междустрочного интервала — обычное использование свойства line-height. Это потому, что вы всегда хотите убедиться, что между строками достаточно места. Если между строками недостаточно места, текст может быть трудночитаемым.

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

Когда вы используете число для установки высоты строки элемента в CSS, вы не должны использовать значения ниже 1,5. Это связано с тем, что значения высоты строки ниже 1,5 могут затруднить использование вашего веб-сайта читателями с нарушениями зрения.

Пример CSS для высоты строки

Предположим, мы разрабатываем страницу «О нас» для веб-сайта местного кулинарного клуба. Страница содержит заголовок, за которым следует абзац текста с описанием клуба.

«Карьерная карма вошла в мою жизнь, когда я больше всего в ней нуждалась, и быстро помогла мне попасть на буткемп. Через два месяца после выпуска я нашла работу своей мечты, которая соответствовала моим ценностям и целям в жизни!»

Венера, инженер-программист в Rockbot

Мы хотим, чтобы наш текст был правильно распределен. Итак, мы решили установить высоту строки абзаца текста на веб-странице в 1,6rem. Мы можем сделать это, используя этот код:

 
 
О нас
 
Fantastic Chefs – кулинарный клуб, основанный в 2007 году в Сиэтле, штат Вашингтон. Наш кулинарный клуб собирается еженедельно, чтобы поделиться рецептами, обсудить методы приготовления и вместе приготовить еду. Каждую субботу днем ​​наши участники собираются на нашей кухне в Сиэтле. 
<стиль>
п {
размер шрифта: 16px;
высота строки: 1,6 бэр;
} 

Наш код возвращает: Нажмите на в редакторе кода выше, чтобы увидеть вывод нашего кода HTML/CSS.

В нашем HTML-файле мы определили заголовок «О нас», используя тег

. Затем мы написали описание фантастических поваров и вложили это описание в HTML-теги

.

В нашем файле CSS мы определили одно правило. Наше правило использует два свойства CSS. Мы устанавливаем высоту строки 1,6 рем и размер шрифта 16 пикселей для всех HTML-тегов

.

Единица измерения «rem», которую мы использовали со свойством line-height, устанавливает высоту строки относительно размера шрифта корневого элемента. «rem» означает «корневой элемент». Итак, поскольку размер шрифта был 16 пикселей, высота строки для этого абзаца текста была 25,6 пикселей (16 пикселей * 1,6).

Текст в абзаце выше достаточно разнесен и не перекрывается.

Мы также могли бы применить нашу высоту строки к нашему элементу