Содержание

line-height, letter-spacing, word-spacing — учебник CSS

Работая со стилем для текста, вы можете устанавливать необходимые расстояния между символами, словами и строками. Задаются такие расстояния в любых единицах измерения CSS, будь-то px, pt, em или другое. Исключением являются проценты – с их помощью можно задать расстояние между строками (интерлиньяж), но они не работают при установке интервала между символами или словами.

Межсимвольный интервал CSS: letter-spacing

Задать межсимвольный интервал можно с помощью свойства CSS letter-spacing. Помимо обычных значений (положительных и отрицательных) также можно использовать значения inherit (чтобы наследовать значение у родителя) и normal (если необходимо вернуть нормальное расстояние между символами).

Пример записи межсимвольного интервала:


p {
	letter-spacing: 2em;
}

Интервал между словами: word-spacing

Свойство CSS word-spacing отличается от предыдущего тем, что устанавливает расстояние между словами, а не между символами. Для данного свойства тоже предусмотрены значения

normal и inherit. Можно задавать отрицательные значения. Ниже показан пример записи стиля:


p {
	word-spacing: 6px;
}

Межстрочный интервал: line-height

С помощью свойства CSS line-height можно задавать расстояние между строками текста. Как было сказано в начале темы, для установки интерлиньяжа, помимо других единиц измерения, допускается использовать проценты. Также разрешено записывать значение в виде множителя (числа больше 0): для вычисления расстояния браузер умножит размер шрифта на заданное число. Отрицательные значения не работают. Доступны значения normal и inherit.

Ниже – пример, как сделать межстрочный интервал CSS:


p {
	line-height: 180%;
}

На скриншоте можно увидеть, как выглядит текст со всеми тремя свойствами:

Скриншот: интервалы в CSS

Итоги

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

Далее в учебнике: выравнивание текста в CSS – свойство text-align.

Межстрочный интервал line-height | CSS — Примеры

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

line-height: normal | <number> | <length> | <проценты> | inherit | initial | unset

normalРасстояние между строчками вычисляется браузером самостоятельно
<number>Число от 0.
line-height: 1.5; = font-size * 1.5 = 20px * 1.5 = line-height: 30px;
Текст легче читать, при значении от 1.5 до 2 [w3.org].
<length>Любые единицы измерения: px, em, rem, sm.
<проценты>% от em
initialТо же, что normal
inheritНаследуется значение родителей
unsetНаследуется значение родителей
Изменить line-height:

Когда в товарищах согласья нет,
На лад их дело не пойдет,
И выйдет из него не дело, только мука.
Однажды Лебедь, Рак да Щука
Везти с поклажей воз взялись
И вместе трое все в него впряглись;
Из кожи лезут вон, а возу все нет ходу!
Поклажа бы для них казалась и легка:
Да Лебедь рвется в облака,
Рак пятится назад, а Щука тянет в воду.
Кто виноват из них, кто прав — судить не нам;
Да только воз и ныне там.

<style>
#nol {
  font-size: 11px;
  line-height: 13px;
  padding: 10px; 
  border: 5px solid #456; 
}
</style>

<div></div>

height = количество_строк * line-height
height = 12 * 13px = 156px

Чем отличается

line-height от height или padding

padding — это отступ от height до границы элемента.

height: auto; (по умолчанию) — это

  1. height: 0;
  2. если присутствует текст, то сумма line-height всех строк [см. пример выше с расчётами]
  3. если есть дочерние элементы, то сумма их height, border, padding и margin
Изменить line-height:
Изменить height:

Когда в товарищах согласья нет,
На лад их дело не пойдет,
И выйдет из него не дело, только мука.
Однажды Лебедь, Рак да Щука
Везти с поклажей воз взялись

И вместе трое все в него впряглись;
Из кожи лезут вон, а возу все нет ходу!
Поклажа бы для них казалась и легка:
Да Лебедь рвется в облака,
Рак пятится назад, а Щука тянет в воду.
Кто виноват из них, кто прав — судить не нам;
Да только воз и ныне там.

<style>
#nol1 {
  font-size: 11px;
  height: 156px;
  line-height: 13px;
  padding: 10px; 
  border: 5px solid #456; 
}
</style>

<div></div>

Расстояние между строк HTML

Междустрочный интервал можно узнать, если из line-height вычесть font-size. Причём значение межстрочного расстояния делится на два. Одна половина увеличивает отступ от буквы до верхнего края, другая — до нижнего. То есть получается, что текст располагается ровно по середине блока.

Пример

Пример

<div>line-height</div>
<div>padding</div>

Это отличный инструмент, чтобы однострочный текст или картинку выравнивать вертикально по центру блока.

line-height наследуется от предка к потомку Изменить line-height родителя:

Зелёный потомок

Синий потомок

<div>
  <div>Зелёный потомок</div>
  <div>Синий потомок</div>
</div>

Значение, заданное потомку, будет главнее того, что задано родителю.

Изменить line-height Зелёного потомка:
Изменить line-height Синего потомка:

Зелёный потомок

Синий потомок

<div>
  <div>Зелёный потомок</div>
  <div>Синий потомок</div>
</div>

Значение <number> единственное, которое отталкивается от значения font-size элемента, а не от его родителя.

значение line-height в <number>pxem%

Случается нередко нам
И труд и мудрость видеть там,

Где стоит только догадаться
За дело просто взяться.
<div>
  <div>текст<br>текст</div>
  текст<br>текст
</div>

Для <number> line-height родителя: 16px * 2 = 32px
Для <number> line-height потомка: 30px * 2 = 60px

Для px line-height родителя: 32px
Для px line-height потомка: 32px

Для em line-height родителя: 16px * 2 = 32px
Для em line-height потомка: 16px * 2 = 32px

Для % line-height родителя: 16px * 200 / 100 = 32px
Для % line-height потомка: 16px * 200 / 100 = 32px

line-height и HTML тег span

Элемент с display: inline; не может иметь height. Поэтому, ежели line-height родителя меньше line-height дочернего элемента, строчный потомок увеличивает высоту строки предка, на которой он находится. Между

line-height нескольких строчных элементов, находящихся на одной строке, также выбирается то, что больше.

Изменить line-height родителя:
Изменить line-height строчного потомка:

span

<div>
  <span>span</span>
</div>
‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it … The height and depth of the font above and below the baseline are assumed to be metrics that are contained in the font. [w3.org]

Иными словами, если font-size строчного элемента отличается от font-size блочного, то первый может увеличить высоту строки родителя, на которой он находится.

Изменить line-height:
Изменить font-size:

span

<div>
  <span>span</span>
</div>

Откуда взялся вертикальный отступ у картинки? Как убрать межстрочный интервал?

У блочного элемента нет высоты строки.

display: block;
<div>
  <img alt="16*16" src="http://2.bp.blogspot.com/-KpOxK0BzM-w/U0ZIUo4PF7I/AAAAAAAAEUI/PO4MiuWxy1o/s320/16.png" />
</div>

Практическое использование: Как убрать отступ под картинкой.

line-height меняется вместе с шириной окна браузера
  1. Flexible typography with CSS locks [typekit.com]

Как изменить интерлиньяж в HTML-тексте

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html>

<head>
<meta charset=»utf-8″>
<title>line-height</title>
<style>
h2 {
ine-height: 70%;
}
p {
line-height: 1;
}
</style>
</head>
<body>
<div>
<h2>Заголовок</h2>
<p>Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать.</p>
</div>
</body>
</html>

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

Если мы зададим line-height для тега <div>, окутывающего и заголовок, и абзац, а у них, соответственно, это свойство уберем, то получится:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>line-height</title>
<style>

div {
line-height: 1.5;
}

</style>
</head>
<body>
<div>
<h2>Заголовок</h2>
<p>Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать.</p>

</div>
</body>
</html>

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

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

Отнюдь.

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

 





Метки: 

Расстояние между базовыми линиями строк текста. Складывается из размера шрифта и межстрочным расстоянием. На рис. 1 показана базовая линия текста и расстояние между ними.

Рис. 1. Интерлиньяж

На веб-странице интерлиньяж вычисляется браузером автоматически в зависимости от размера и типа шрифта. Также значение интерлиньяжа можно установить самостоятельно с помощью стилевого атрибута line-height или font.

В качестве значения line-height можно использовать множитель, процентную запись или точное значение, заданное в любых единицах принятых в CSS — пиксели (px), дюймы (in), пункты (pt) и др. В примере 1 показана установка интерлиньяжа в пикселах.

Пример 1. Использование line-height

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Интерлиньяж</title>
  <style type="text/css">
   DIV {
    line-height: 30px;
   }
  </style>
 </head>
 <body>
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
   volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution 
   ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
   consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Значение интерлиньяжа установлено как 30 пикселов

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

Аналогично можно установить интерлиньяж с помощью стилевого параметра font, задавая ему три аргумента: размер шрифта, межстрочное расстояние и гарнитуру, как показано в примере 2.

Пример 2. Использование font

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Интерлиньяж</title>
  <style type="text/css">
   P {
    font: 11pt/16pt sans-serif;
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
  sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna 
  aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud 
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea 
  commodo consequat.</p>
 </body>
</html>

В данном примере задан рубленый шрифт (sans-serif), размер его установлен 11 пунктов, а интерлиньяж — 16 пунктов. Обратите внимание, что эти два параметра пишутся через слэш (/). Результат примера показан на рис. 3.

Рис. 3. Значение интерлиньяжа установлено как 16 пунктов

 

 




 

Веб-разработка*

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

1. Размеры

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

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

Я использую px так как это значительно упрощает расчеты, но можно использовать и em.
 

2. Интерлиньяж

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

Определение верного интерлиньяжа требует определенной ловкости, но ниже приведен пример того, на что должен быть похож ваш код:
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}

 

3. Обработка кавычек

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

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

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

4. Вертикальный ритм

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

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

p {
margin-bottom: 15px;
}

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

5. Верхние и нижние висячие строки

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

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

6. Выделение

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

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

h2 {
font-weight: bold;
}

h3 {
text-transform: uppercase;
}

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

7. Масштаб

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

Пример типографического масштаба определенного в CSS:
h2 {
font-size: 48px;
}

h3 {
font-size: 36px;
}

h4 {
font-size: 24px;
}

h5 {
font-size: 21px;
}

h5 {
font-size: 18px;
}

h6 {
font-size: 16px;
}

p {
font-size: 14px;
}
 

8. Подчищаем рваные края

Когда создается блок текста с выравниванием по левому или правому краю, не забудьте подчистить рваные края (неровные строки) и сбалансировать текст без всяких неожиданных «дыр» или неуклюжих форм текстовых блоков. Рваные края могут отвлекать читателя. Хороший край «мягкий», равномерный, без слишком длинных, или слишком коротких строк. Нельзя контролировать это с помощью CSS, так что для получения хороших краев надо вносить в текст ручные правки.

Можно улучшить края с помощью переносов, но к сожалению CSS тут бессилен. Возможно, в «ближайшем» будущем CSS3 обеспечит некоторый контроль… Но несмотря на это – не все потеряно. Есть ряд решений на стороне сервера и на стороне клиента, которые осуществляют автоматическую расстановку переносов. Например phpHyphenator, Hyphenator или online генераторы.

Hyphenator.js это Javascript-библиотека которая осуществляет автоматическую расстановку переносов на стороне клиента.
 

Ресурсы для дальнейшего изучения

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

Как увеличить или уменьшить интервал между абзацами на веб-странице с помощью CSS?

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

Изменение расстояния между абзацами

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

Вот пример таблицы стилей для HTML 4 от Консорциума W3, в которых устанавливается верхнее и нижнее поля равными 1.12em. Поэтому разрыв между абзацами будет составлять 1.12em.

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

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

p {
  margin-top: 1em ;
  margin-bottom: 1em ;
}

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

В приведенном выше примере оба поля имеют одинаковый размер, поэтому расстояние между абзацами составляет 1em.

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

p {
  margin-top: 2em;
  margin-bottom: 2em;
}

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

Для решения проблемы мой читатель использовал следующее правило CSS:

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

Для каждой строки задано свойство line-height: 2. Поэтому последняя строка первого абзаца имеет дополнительный пробел ее, а первая строка второго абзаца — дополнительное пространство над ней. Добавьте это расстояние к разрыву между абзацами, которое устанавливают браузеры, и вы получите продемонстрированный выше результат.

Но если нужно задать между абзацами интервал, не равный расстоянию между отдельными строками, установите верхнее и нижнее поля равными 0.

p {
  line-height: 2;
  margin-top: 0;
  margin-bottom: 0;
}

Для распознавания абзацев установите отступ первой строки с помощью свойства text-indent.

p {
  line-height: 2;
  margin-top: 0;
   margin-bottom: 0;
  text-indent: 22px;
}

Результат выглядит следующим образом:

Если вам не нравится полученный результат, измените значение отступа.

Данная публикация является переводом статьи «How do I Increase/Decrease the Space Between Paragraphs on a Web Page (CSS)» , подготовленная редакцией проекта.

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

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

Навигация по статье:

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

Изменить расстояние между строк CSS мы можем при помощи трех свойств: line-height, margin и padding. Давайте рассмотрим подробнее каждый из этих способов.

Как задать расстояние между строк CSS с помощью line-height?

Итак, наиболее удобным свойством для задания расстояние между строк в CSS является свойство line-height, которое задает межстрочный интервал (как Microsoft Word) относительно размера шрифта.

Значение свойства line-height можно задавать при помощи:

  • множителя
  • в пикселях (px)
  • пунктах (pt)
  • относительных единицах (em)
  • процентах(%)
  • дюймах (in) и др

Кроме этого, значение line-height может наследоваться от родительского блока (inherit) и вычисляться автоматически (normal).

На мой взгляд, наиболее удобной единицей является множитель.

Вот наглядный пример использования изменения расстояние между строк CSS с помощью line-height:

При уменьшении ширины экрана слова подписи одной из иконок перестроились друг под друга. И так как line-height не был задан, слова просто склеились друг с другом.

Допишем для этого заголовка свойство line-height равное 1:

#row-ico h4{ line-height:1; }

#row-ico h4{

line-height:1;

}

Вот что в результате получается:

Как видите, расстояние между словами увеличилось за счет появления отступов сверху и снизу слов.

Как задать расстояние между строк CSS с помощью margin и padding?

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

Вот наглядный пример:

Для данного фрагмента текста зададим нижний margin равный 15px:

#price-text-row p{ margin-bottom:15px; }

#price-text-row p{

margin-bottom:15px;

}

Вот что у нас получится:

Как видите, расстояние между строками увеличилось, но есть отдельные предложения, между которыми расстояние меньше. Это произошло потому, что данные две строки находятся в одном теге <p>, то есть являются одним неразрывным абзацем, а мы задаем нижний отступ для всего абзаца. Так же, при изменении ширины экрана, то есть, при просмотре страницы на мобильных устройствах, другие предложения тоже будут перестраиваться и у них так же будет меньший интервал, чем мы задали отступом.

Точно такой же результат мы получили бы, если бы использовали свойство padding-bottom.

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

Так же вы можете использовать задания расстояния между строк при помощи CSS-свойств margin-bottom и padding-bottom, но этот способ больше подходит для задания расстояний между абзацев, ссылок или пунктов списков.

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


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

А на сегодня у меня все. До встречи в следующих статьях!

С уважением Юлия Гусарь

Как задать межстрочный интервал в CSS и HTML?

Здравствуйте, дорогие друзья!

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

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

Навигация по статье:

Как задать межстрочный интервал CSS?

Для задания межстрочного интервала в CSS существует специальное свойство line-height. Дословно оно переводится как высота строки.
Это CSS-свойство может принимать несколько значений:

  1. 1.Множитель (число).

    Например:

    line-height: 1.5;

     

    Пример изменения межстрочного
    интервала текста в HTML и СSS.

    В данном примере мы получаем полуторный межстрочный интервал.
    Здесь за единицу берётся размер шрифта. То есть если размер шрифта будет равен 16 пикселей, то межстрочный интервал со значением 2 будет равен:
    2 x 16 = 32 пикселя.

  2. 2.Значение в пикселях или других единицах.

    Например:

    line-height: 20px;

     

    Пример изменения межстрочного
    интервала текста в HTML и СSS.

    Так же вместо пикселей (px) можно использовать пункты (pt), высотe шрифта текущего элемента (em), дюймы(in) и так далее.

  3. 3.Значение в процентах.

    Напрмер:

    line-height: 180%;

     

    Пример изменения межстрочного
    интервала текста в HTML и СSS.

    В этом случае за 100% берётся высота шрифта.

  4. 4.Inherit – значение межстрочного интервала будет наследоваться от родительского элемента.

    Например:

    line-height: inherit;

     

    Пример изменения межстрочного
    интервала текста в HTML и СSS.

  5. 5.Normal – в данном случае межстрочное расстояние задаётся автоматически.

    Например:

    line-height: normal;

     

    Пример изменения межстрочного
    интервала текста в HTML и СSS.

Лично мне больше всего нравится первый способ. Так как он прост и понятен в использовании и при этом интервал сохраняется при изменении размера шрифта.

Как задать межстрочный интервал html?

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

  1. 1.Использовать атрибут style, внутри которого использовать то же свойство line-height с нужными нам параметрами.
    Например:

    <div style=” line-height:1.5;”> Пример изменения межстрочного интервала текста в HTML и СSS. </div></li>

    <div style=” line-height:1.5;”>

    Пример изменения межстрочного

    интервала текста в HTML и СSS.

    </div></li>

  2. 2.Использовать тег </style> и в нём уже для элемента с нужным классом задавать межстрочный интервал.
    Например:

    <style> .block { line-height: 120%; } </style> <div class=”block”> Пример изменения межстрочного интервала текста в HTML и СSS. </div>

    <style>

    .block {

    line-height: 120%;

    }

    </style>

     

    <div class=”block”>

    Пример изменения межстрочного

    интервала текста в HTML и СSS.

    </div>

В идеале тег style должен располагаться в теге , но работать он будет в любом месте страницы.

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

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

Ниже приведён пример заголовка без межстрочного интервала и с ним.

<h4>Межстрочный интервал равен 0%</h4> <h4>Межстрочный интервал равен 300%</h4>

<h4>Межстрочный интервал равен 0%</h4>

<h4>Межстрочный интервал равен 300%</h4>

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

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

Таким образом, при помощи данного CSS свойства вы можете изменять межстрочный интервал в HTML и CSS коде, и таким образом делать оформление ваших сайтов более привлекательным.

Спасибо что дочитали статью до конца! Если она была для вас полезной, то обязательно поделитесь ею в соцсетях. Так вы поможете мне в продвижении моего проекта.

Желаю вам успехов в оформлении ваших сайтов! До встречи в следующих статьях!

С уважением Юлия Гусарь

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

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

Задаем настройки по умолчанию (первый способ)

Как в «Ворде» изменить интервал между строками, мы, конечно, поговорим, но, помимо этого, изначально разберемся, как его изменить, установив по умолчанию, чтобы в последующие разы вам не приходилось проводить все настройки по новой.

Итак, как изменять Первый способ будет универсальным для всех версий программы. Но, в отличие от следующего, он будет более сложный. Так что советуем дочитать статью до конца, чтобы подобрать способ под себя.

Итак, изначально вам следует создать новый документ в «Ворде». Как только вы это сделаете, перейдите во вкладку «Главная» на верхней панели инструментов. В ней вам необходимо найти графу «Стили», которая находится в правой части. Там вам нужно нажать на маленькую стрелочку, которая располагается в нижнем правом углу. Перед вами откроется меню стилей, но нас интересуют лишь значки в самом низу. Нажмите на третий по счету.

Как только вы это сделаете, появится окно настроек — перейдите во вкладку «По умолчанию». В ней обратите внимание на пункт «Интервал», в правой части вы можете задать Можете воспользоваться шаблонами в выпадающем списке или же ввести вручную, в поле правее. Это и есть первый способ, По окончании не забудьте выбрать «В новых документах, использующих этот шаблон» и нажать кнопку «ОК».

Задаем настройки по умолчанию (второй способ)

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

Вам, как и в прошлый раз, нужно создать новый документ и открыть вкладку «Главная». Только теперь отыщите графу «Абзац». В ней нажмите такую же стрелочку в правом нижнем углу графы. Перед вами появится окно, похожее на предыдущее. В нем также есть пункт «Интервал», в нем с правой стороны можно задать межстрочный интервал. Сделайте это, а затем нажмите на кнопку «По умолчанию». В окне, которое потом появится, выберите «Всех документов, основанных на шаблоне Normal» и нажмите «ОК». Теперь при создании новых документов у вас будет автоматически выбран выставленный вами межстрочный интервал.

Выбераем интервал в пару кликов мыши

Здесь вообще все просто, однако данный способ применим лишь локально, так что изначально выделите ту область текста, в которой нужно поменять интервал. Выделив ее, отыщите в уже известной графе «Абзац» кнопку «Интервал». Нажмите на нее и в выпадающем списке выберите нужное вам значение. Если этих настроек вам мало, то вы можете выбрать «Другие варианты…» и откроется такое же окно, как в прошлый раз. Что в нем делать, вы знаете.

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

Уменьшение расстояние между строк в текстовом редакторе Ворд требуется практически каждому второму пользователю. Для чего это нужно? В первую очередь, чтобы уменьшить объем написанного текста, сделать его более аккуратным и привлекательным на вид. В нашей статье мы расскажем, как уменьшить расстояние между строками в Ворде, применяя несколько простых и доступных способов. Здесь же вы найдете способ, как изменить интервал между строк в Ворде, используемом на компьютерах Mac.

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

Как уменьшить расстояние между строками в Ворде 2007 года?

Первый способ – очень прост. Чтобы изменить междустрочный интервал для начала требуется выделить нужный абзац, либо весь текст при помощи выделения мышкой или нажатия комбинации клавиш Ctrl+A. Когда весь текст будет выделен – находим на панели инструментов значок «Междустрочный интервал», выглядит он следующим образом:

Как вы заметили, в этом пункте предлагается несколько вариантов междустрочных интервалов. Также пользователь может указать свой размер расстояния между строками в Ворде, для этого он должен нажать на пункт «Другие варианты междустрочных интервалов». Обращаясь к данному способу, интервал между строк можно не только уменьшить, но и увеличить.

Как уменьшить расстояние между строками в Word: способ № 2?

Способ, о котором сейчас пойдет речь, позволяет внести изменения в отдельных абзацах текста. Делается это через контекстное меню. Как это сделать?

  1. Для начала выделяем абзац, где нужно изменить междустрочный интервал.
  2. Далее – жмем правой кнопкой мышки и выбираем пункт «Абзац».
  3. На экране появится окно, где пользователь сможет самостоятельно задать значение расстояния между строками в Вордовском документе.

Уменьшаем интервал между строк в Word 2003

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

Мы также выделяем нужный абзац или весь текст (опять же используя прокрутку или комбинацию двух клавиш), а затем находим раздел «Абзац», но уже в разделе «Формат», который расположен на панели инструментов. Здесь пользователь также сможет самостоятельно задать размер междустрочного интервала. После – необходимо нажать кнопку ОК.

Способ для Mac

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

Первый способ актуален для тех, кто предпочитает в работе программу Ворд 2011 года. Итак, как изменить расстояние между строк? Выделяем абзац, который нужно изменить. Далее на панели инструментов, на вкладке «Главная» находим значок «Междустрочного интервала» и задаем нужный нам размер. Кстати, если вы захотите поменять интервал между абзацами, то их необходимо выделить, а затем во вкладке «Главная»- «Абзац» выбрать пункт «Другие варианты междустрочных интервалов». Все, что нужно это выбрать нужный размер интервала между абзацами в графах «Перед» и «После».

Если же вы предпочитаете работать в более новой версии текстового редактора, например 2016 года. То второй способ изменение междустрочного интервала – подойдет для вас. Первое что нужно сделать – это зайти во вкладку «Дизайн». Затем пользователь должен выбрать пункт под названием «Интервал между абзацами». Программа предложит на выбор несколько вариантов: «сжатый», «узкий», «открытый», «свободный» и т.д.

Кстати, в Ворде для Mac можно использовать и вышеописанные способы, которые используют пункт «Междустрочный интервал». Алгоритм действий практически ничем не отличается. Пользователь выделяет нужный абзац или весь текст, а затем нажимает на значок и выбирает необходимый размер интервала, размещенного между строк.


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

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

Свойство line-height устанавливает интервал между строками текста (межстрочный интервал). Свойство не задает промежуток между строками текста как могло бы показаться, оно задает высоту линии текста . Это значит, что реальный промежуток между строками будет вычисляться так: line-height font-size = расстояние между строками текста. Или наоборот line-height = font-size + расстояние между строками текста.

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

Синтаксис

Селектор { line-height: CSS единицы | проценты | множитель | normal | inherit; }

Значения

По умолчанию браузер выбирает межстрочный интервал автоматически (normal ).

Примеры

Пример

line-height font-size = 35px — 13px = 21px:

P { font-size: 13px; line-height: 35px; }

Результат выполнения кода:

Пример

Уменьшим промежуток до 21px 13px = 7px :

P { font-size: 13px; line-height: 21px; }

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

В данном примере расстояние между строками текста будет line-height font-size = 13px 13px = 0px — строки практически слипнуться (хвостики букв верхней строки будут касаться хвостиков букв нижней):

P { font-size: 13px; line-height: 13px; }

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

В данном примере значение line-height — множитель 1.5 от размера шрифта. Следовательно line-height будет эквивалентен font-size * 1.5 = 13px * 1.5 = 20px . А реальный промежуток между строками будет line-height font-size = 20px 13px = 7px :

P { font-size: 13px; line-height: 1.5; }

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Увеличим множитель:

P { font-size: 13px; line-height: 2.5; }

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Если сделать line-height меньше font-size , то строки вообще налезут друг на друга:

P { font-size: 13px; line-height: 9px; }

Результат выполнения кода.

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

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

1. Выделите текст, интервал между абзацами в котором вам нужно изменить. Если это фрагмент текста из документа, используйте мышку. Если же это все текстовое содержимое документа, используйте клавиши “Ctrl+A” .

2. В группе “Абзац” , которая расположена во вкладке “Главная” , найдите кнопку “Интервал” и нажмите на небольшой треугольничек, расположенный справа от нее, чтобы развернуть меню данного инструмента.

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

  • Удалить интервал перед абзацем;
  • Удалить интервал после абзаца.

4. Интервал между абзацами будет удален.

Изменяем и выполняем точную настройку интервалов между абзацами

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

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

2. Вызовите диалоговое окно группы “Абзац” , нажав на маленькую стрелочку, которая расположена в правом нижнем углу этой группы.

3. В диалоговом окне “Абзац” , которое откроется перед вами, в разделе “Интервал” задайте необходимые значения “Перед” и “После” .

    Совет: Если это необходимо, не покидая диалогового окна “Абзац” , вы можете отключить добавление интервалов между абзацами, написанными в одном стиле. Для этого установите галочку напротив соответствующего пункта.
    Совет 2: Если вам не нужны интервалы между абзацами вообще, для интервалов “Перед” и “После” задайте значения “0 пт” . Если интервалы нужны, хоть и минимальные, задайте значение больше 0 .

4. Интервалы между абзацами изменятся или исчезнут, в зависимости от заданных вами значений.

    Совет: Если это необходимо, вы всегда можете установить заданные вручную значения интервалов в качестве параметров по умолчанию. Для этого достаточно в диалоговом окне “Абзац” нажать на соответствующую кнопку, которая расположена в его нижней части.

Аналогичные действия (вызов диалогового окна “Абзац” ) можно проделать и через контекстное меню.

1. Выделите текст, параметры интервалов между абзацами в котором требуется изменить.

2. Кликните правой кнопкой мышки по тексту и выберите пункт “Абзац” .

3. Задайте необходимые значения, чтобы изменить расстояние между абзацами.

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

Установите междустрочный интервал перед началом работы. Если вы хотите создать документ с одним стандартным междустрочным интервалом, установите его прежде, чем начать (чтобы потом сэкономить время). Для изменения междустрочного интервала перейдите на вкладку Главная или Разметка страницы.

Изменение интервала на вкладке Главная. На вкладке Главная найдите раздел Абзац. Здесь нажмите значок «Междустрочный интервал», чтобы открыть меню междустрочного интервала. Значок имеет 4 маленькие линии со стрелкой, указывающей вверх и вниз. Из этого меню можно выбрать общие параметры междустрочного интервала.

  • Если вы не видите значок «Междустрочный интервал», то, скорее всего, он отсутствует, потому что окно недостаточно большое. Вы можете изменить интервал, нажав значок со стрелкой справа от слова Абзац. Это откроет меню Абзац.
  • В меню Абзац вы можете настроить междустрочный интервал с помощью раскрывающегося меню «междустрочный:» в разделе Интервал.
  • Изменение интервала на вкладке Разметка страницы. На вкладке Разметка страницы нажмите на значок со стрелкой справа от слова Абзац. Это откроет меню Абзац. В меню Абзац вы можете настроить междустрочный интервал с помощью раскрывающегося меню «междустрочный:» в разделе Интервал.

    Изменение интервала между абзацами. Кроме изменения интервала между строками, вы можете изменить интервал до и после каждого абзаца. На вкладке Разметка страницы ищите Интервал в разделе Абзац.

    • «До» добавит пространство перед началом абзаца.
    • «После» будет добавлять пространство каждый раз, когда вы нажимаете клавишу Enter, чтобы начать новый абзац.
  • Варианты междустрочного интервала. По умолчанию междустрочный интервал установлен на 1,15. Если вы хотите задать одинарный интервал, вам нужно выбрать 1 в выпадающем меню значка «Междустрочный интервал» или «Одинарный» в Абзац-Интервал-междустрочный.

    • «Точно» позволит Вам установить точное расстояние между строками, измеренное в пунктах (в дюйме 72 пункта).
    • «Множитель» позволит вам установить больший интервал, например, тройной интервал.
  • Измените интервал по умолчанию. Если вы хотите изменить интервал, заданный по умолчанию (1,15), задайте нужные вам значения и нажмите кнопку По умолчанию…. Word попросит вас подтвердить изменения значений по умолчанию.

  • Изменение интервала для определенных частей текста. Для этого выберите текст, который вы хотите изменить, а затем настройте интервал, как описано выше.

    • Вы можете изменить интервал всего документа, выбрав весь текст. Чтобы быстро выбрать весь текст, нажмите Ctrl+A (PC) или Command+A (Mac). Это не повлияет на верхние и нижние колонтитулы или текстовые поля. Для изменения интервала в них, вам нужно будет выбрать эти разделы отдельно.
  • CSS | свойство text-indent — GeeksforGeeks

    < html >

    < >

    CSS свойство text-indent

    title >

    .sudo {

    текстовый отступ: 70 пикселей;

    }

    .geeks {

    text-indent: -5em;

    }

    .gfg {

    отступ текста: 40%;

    }

    стиль >

    голова > 000 000 000 000 000 000 000 000 000 >

    < h2 style = "" > GeeksforGeeks h2 >

    0003 Свойство h3 >

    < h3 > текст-отступ: 70px: h3 > класс = «sudo» >

    Подготовьтесь к набору персонала по продукту

    Компании, основанные на , такие как Microsoft, Amazon, Adobe

    и т. Д. С бесплатной подготовкой к онлайн-размещению

    курс.Курс фокусируется на различных вопросах MCQ

    и кодировании, которые, вероятно, будут заданы в интервью

    и сделают ваше предстоящее размещение

    сезоном эффективным и успешным.

    div >

    < h3 > текстовый отступ: -5em: 000 0004 < div class = «вундеркиндов» >

    Подготовьтесь к набору персонала для продукта

    , компании, основанные на Microsoft 9000, Amazon

    , Microsoft

    и т. Д. С бесплатной подготовкой к онлайн-размещению

    курс.Курс фокусируется на различных вопросах MCQ

    и кодировании, которые, вероятно, будут заданы в интервью

    и сделают ваше предстоящее размещение

    сезоном эффективным и успешным.

    div >

    < h3 > текстовый отступ: 40%: 0004 < div class = "gfg" >

    Подготовьтесь к привлечению персонала для продукта

    , компании, основанные на Microsoft
    ,

    , Microsoft и т. Д. С бесплатной подготовкой к онлайн-размещению

    курс.Курс фокусируется на различных вопросах MCQ

    и кодировании, которые, вероятно, будут заданы в интервью

    и сделают ваше предстоящее размещение

    сезоном эффективным и успешным.

    div >

    body >

    | CSS-уловки

    Свойство text-indent указывает, на сколько горизонтальных интервалов следует переместить текст до начала первой строки текстового содержимого элемента.Интервал рассчитывается от начального края элемента контейнера уровня блока.

    Начальный край обычно находится слева, но может быть правым, если в режиме письма справа налево, как свойство direction.

    Свойство text-indent наследуется при указании в блочном элементе, что означает, что оно также влияет на дочерние элементы inline-block. Имея дело с дочерними элементами inline-block, вы можете заставить их установить значение text-indent: 0; .

    Синтаксис

      text-indent:  | <процент> | наследовать && [висит || каждая строка ]
    
    п {
      текстовый отступ: 1.5em;
    }  

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

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

    подвесной

    висит - это экспериментальное и неофициальное значение для свойства text-indent .Он инвертирует строки с отступом. По сути, он делает отступ для каждой строки, кроме первой, что приводит к какой-то висячей пунктуации.

    Это значение является флагом, идущим вместе с обычным значением, например длиной.

    в каждую строку

    каждая строка - это экспериментальное и неофициальное значение для свойства text-indent . Идея состоит в том, чтобы делать отступ для каждой строки после принудительного разрыва строки (с
    ).

    Это значение является флагом, идущим вместе с обычным значением, например длиной.

    Демо

    См. Отступ текста пера Криса Койера (@chriscoyier) на CodePen.

    Сопутствующие объекты

    Другие ресурсы

    Поддержка браузера

    Базовая поддержка
    Хром Safari Firefox Opera IE Android iOS
    любой любой любой 3.5+ 3+ любой любой
    подвес
    Хром Safari Firefox Opera IE Android iOS
    нет нет нет нет нет нет нет
    значение каждой строки
    Хром Safari Firefox Opera IE Android iOS
    нет нет нет нет нет нет нет

    Как сделать отступ в абзацах с помощью CSS

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

    Один общий стиль абзаца, который вы часто видите в печати (и который мы можем воссоздать в Интернете), - это когда первая строка этого абзаца имеет отступ на одно место табуляции.Это позволяет читателям видеть, где начинается один абзац и заканчивается другой.

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

    Синтаксис этого свойства прост. Вот как вы можете добавить текстовый отступ ко всем абзацам в документе.

    p {
    text-indent: 2em;
    }

    Настройка отступов

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

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

    p + p {
    отступ текста: 2em;
    }

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

    р {
    край-низ: 0;
    padding-bottom: 0;
    }
    p + p {
    margin-top: 0;
    padding-top: 0;
    }

    Отрицательные отступы

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

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

    цитата p {
    text-indent: -.5em;
    }

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

    Относительно полей и заполнения

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

    text-indent - CSS: каскадные таблицы стилей

    .

    Свойство text-indent CSS устанавливает длину пустого пространства (отступа), которое помещается перед строками текста в блоке.

    Горизонтальный интервал задается относительно левого (или правого, для компоновки справа налево) края поля содержимого содержащего элемента уровня блока.

     
    отступ текста: 3мм;
    текстовый отступ: 40 пикселей;
    
    
    отступ текста: 15%;
    
    
    текстовый отступ: 5em на каждую строку;
    отступ текста: 5em висит;
    text-indent: 5em, висящая на каждой строке;
    
    
    текст-отступ: наследовать;
    текст-отступ: начальный;
    текст-отступ: не установлен;
      

    Значения

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

    Простой отступ

    HTML
      

    Lorem ipsum dolor sit amet, consctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    Lorem ipsum dolor sit amet, conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    CSS
      п {
      текстовый отступ: 5em;
      фон: пудрово-голубой;
    }  
    Результат

    Пропуск отступа в первом абзаце

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

    Обработка первого абзаца иначе, чем последующих абзацев может быть выполнена с помощью комбинатора соседнего родственного брата, как в следующем примере:

    HTML
      

    Lorem ipsum

    Lorem ipsum dolor sit amet, conctetur adipiscing elit. Suspendisse eu venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus blandit eros et imperdiet auctor.Mauris sapien nunc, condimentum a efficitur non, elementum ac разумный. Cras conquat turpis non augue ullamcorper, sit amet porttitor dui интердум.

    Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in, tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla facilisi. У feugiat Vehicula magna iaculis vehicleula. Nulla suscipit tempor odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis efficitur id, pulvinar elementum diam.Maecenas mollis blandit placerat. Ut gravida pellentesque nunc, in eleifend ante convallis sit amet.

    Donec ullamcorper elit nisl

    Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor in ante gravida iaculis. Целое число posuere tempor metus. Вестибулум лациния, nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit vestibulum nulla. Пеллентески обитатель morbi tristique senectus et netus et malesuada fames ac turpis egestas.Donec vulputate leo ut iaculis ultrices. Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci eleifend id. Ут на набережной велит.

    Aenean rutrum tempor ligula, luctus ligula auctor vestibulum. Сед sollicitudin велит в leo fringilla sollicitudin. Proin eu gravida arcu. Нам iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan libero, sed euismod ipsum ullamcorper sed.

    CSS
      п {
        выравнивание текста: выравнивание;
        маржа: 1em 0 0 0;
    }
    p + p {
        текстовый отступ: 2em;
        маржа: 0;
    }  
    Результат

    Отступ в процентах

    HTML
      

    Lorem ipsum dolor sit amet, consctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    Lorem ipsum dolor sit amet, conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    CSS
      п {
      отступ текста: 30%;
      фон: слива;
    }  
    Результат

    Таблицы BCD загружаются только в браузере

    Как сделать отступ или табуляцию текста на моей веб-странице или в HTML?

    Обновлено: 01.02.2021, Computer Hope

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

    Рекомендуемый метод с CSS и HTML

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

    В следующем примере создается класс стилей с именем «tab», который отводит текст и абзац на 40 пикселей слева.

      

    Когда приведенный выше код находится в разделе , вы можете использовать его, добавив его в теги абзаца (

    ), как показано.

     

    Пример вкладки

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

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

    Чтобы связать внешний файл CSS, добавьте следующую строку в свой HTML-документ в элемент (после тега и перед тегом ). В следующем примере мы назвали наш файл .css basic.css

      

    После создания этого файла .css отредактируйте файл и добавьте в него тот же код CSS, за исключением тегов

    В этом абзаце первая линия будет выступать на остальных 40 пикселей, чтобы увидеть вывод строки за пределами элемента и таким образом обрезать все, просто удалите строку CSS, добавив внутренний отступ к абзац (padding-left: 40px;).

    Попытайся "

    С свойством text-indent можно использовать любые единицы измерения длины, включая процентные значения. Размер отступа, установленный в процентах, связан с шириной родительского элемента. Например, если отступ установлен на 50%, а абзац занимает всю ширину окна браузера, первая строка начнется в середине экрана.

     
    
      
        
         Заголовок страницы 
        <стиль>
          .test1 {текст-отступ: 25 пикселей; }
          .test2 {отступ текста: 50%; }
        
      
    
      
        

    Абзац с отступом первой строки 25 пикселей. Lorem ipsum dolor sit amet, consctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Concequat.

    Абзац с отступом первой строки 50%.Lorem ipsum dolor sit amet, consctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Concequat.

    Попытайся "

    Примечание: стоит обратить внимание, что свойство text-indent наследуется, что может привести к неожиданным результатам:

     
    
      
        
         Заголовок страницы 
        <стиль>
          .test1 {text-indent: 15%; }
        
      
    
      
        
    Первая строка текста элемента div будет иметь отступ равный 15%. ширины его родительского элемента или ширины окна браузера.

    Первая строка текста элемента p будет иметь отступ, унаследован от родительского элемента.

    Попытайся "

    Форматирование текста

    Существуют различные свойства форматирования текста, рассмотрим некоторые из них.Свойство text-decoration позволяет сделать текст подчеркнутым, установить строку над текстом или сделать текст перечеркнутым.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *