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

Промежуток между словами

Между словами используется символ пробела. Положительное значение свойства word-spacing задаёт к пробелу дополнительное расстояние, тем самым увеличивая отступ между словами. Отрицательное значение, наоборот, уменьшает.

Значение word-spacing в процентах устанавливает дополнительное расстояние между словами в процентах от длины символа пробела.

Отступы между inline или inline-block элементами

Если два и более пробела идут подряд и не являются неразрывными, то они показываются как один. Знак переноса на новую строку также является пробельным символом. Например, «слово в слово про слово» в исходном коде выглядит так:

«слово в слово про слово»

Изменить это поведение можно с помощью свойства white-space . У тега по умолчанию white-space имеет значение pre и моноширинный шрифт.

Отступ/выступ первой строки в абзаце можно установить с помощью свойства text-indent .

Те же правила и свойства CSS распространяются и на inline и inline-block элементы [подробнее]. Например, « слово в слово про слово » .

 span «слово в слово про слово»

Как убрать расстояние между inline-block элементами

Вариант 1. Удалить символ пробела

Вариант 2. Задать отрицательное значение word-spacing родительскому элементу

Как настроить интервал между inline-block элементами

1. 1
2. 2
3. 3
4. 4
5. 5

1. 1
2. 2
3. 3
4. 4
5. 5

• letter-spacing : промежуток между буквами
• word-wrap : перенос слов на следующую строку

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

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

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

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

В следующем примере расстояние между строками текста будет 50px — 20px = 30px :

Пусть размер шрифта для абзацев равен 30px . Установите свойство line-height так, чтобы видимый белый промежуток между абзацами был равен 15px .

line-height

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

Синтаксис

line-height: множитель | значение | проценты | normal | inherit

Значения

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.

normal Расстояние между строк вычисляется автоматически. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

     h1 < line-height: 60%; >p 
Duis te feugifacilisi
 
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.
  

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

Рис. 1. Применение свойства line-height

Объектная модель

[window.]document.getElementById(» elementID «).style.lineHeight

Браузеры

Internet Explorer до версии 7.0 неправильно вычисляет высоту строк для изображений и элементов форм. Также в этом браузере не поддерживается значение inherit .

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

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

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

Чем отличается line-height от height или padding

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

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

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

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

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

line-height
 
padding

line-height наследуется от предка к потомку

Изменить line-height родителя:
Зелёный потомок
Синий потомок

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

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

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

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

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

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

значение line-height в

Случается нередко нам
И труд и мудрость видеть там,
Где стоит только догадаться
За дело просто взяться.

 
текст
текст
 текст
текст
 Для line-height родителя: 16px * 2 = 32px Для 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

 
span 

 
span