Css отступ между строками – Как изменить расстояние между строками текста? — Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Содержание

line-height — расстояние между строками

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


12.0+	4.0+	1.0+	1.0+	7.0+	1.0+

Описание

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

В CSS свойство line-height устанавливает высоту всей строки текста, поэтому разница между размером шрифта (font-size) и высотой строки (line-height) соответствует межстрочному интервалу. Увеличение значения свойства line-height приводит к увеличению расстояния между строками текста.

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

Примечание: по умолчанию во всех браузерах межстрочный интервал равен 120-125% от размера текущего шрифта. Использование отрицательных значений не допускается.

Для регулирования расстояний между словами используйте CSS свойство word-spacing, для изменения расстояния между буквами — letter-spacing.

Значение по умолчанию:	normal
Применяется:	ко всем элементам
Анимируется:	да
Наследуется:	да
Версия:	CSS1
Синтаксис JavaScript:	object.style.lineHeight=»2″

Синтаксис

line-height: normal|число|высота|inherit;

Значения свойства

Значение	Описание
normal	Стандартный межстрочный интервал.
число	Число, которое будет умножено на текущий размер шрифта для определения межстрочного интервала.
высота	Высота задается с помощью единиц измерения, используемых в CSS.
%	Высота межстрочного интервала в процентах от текущего размера шрифта.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

Пример демонстрирует, как с помощью свойства line-height можно изменять расстояние между строк текста.

div {
line-height: normal;
}

puzzleweb.ru

line-height | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

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

Значения

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

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>line-height</title>
  <style>
   h2 {
    line-height: 60%;
   } 
   p {
    line-height: 1.5;
   }
  </style>
 </head> 
 <body> 
  <h2>Duis te feugifacilisi</h2>
  <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>

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

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

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

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

Браузеры

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

htmlbook.ru

CSS межстрочный интервал: варианты решений :: SYL.ru

Довольно часто у начинающих верстальщиков возникают проблемы при освоении каскадных таблиц стилей (CSS). Не исключением является работа с межстрочными интервалами в CSS. Межстрочный интервал — это расстояние между строчками по вертикали. Как и в обычном документе Microsoft Word, в тексте html-файла тоже можно изменять этот параметр.

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

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

В CSS межстрочный интервал может задаваться в разных единицах длины: пункты (pt), дюймы (in), пиксели (px) и проценты (%). Процент рассчитывается относительно текущего шрифта, и по умолчанию его значение равняется 100 %. Не стоит забывать, что свойство line-height заимствует значение свойства inherit у своего родительского элемента.

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

Процесс работы с межстрочными интервалами достаточно прост. У вас должны быть начальные знания CSS и умение подключать файл к главной странице html. Стили также можно задавать прямо на html-странице:

Чтобы в данном предложении сделать полуторный интервал, необходимо в файле CSS добавить такой код:

p.stroka {

line-height: 1.5;

}

Для того, чтобы сделать двойной интервал, можно прописать такой код:

p.stroka {

line-height: 2;

}

или

p.stroka {

line-height: 200%;

}

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

Теперь приведем пример, как уменьшить межстрочный интервал (CSS):

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

p.line {

line-height: 0.5;

}

или

p.line {

line-height: 50%;

}

или

p.line {

line-height: 2;

}

или

p.line {

line-height: 0.5pt;

}

Все 3 варианта корректны и соответствуют всем стандартам W3C, соответственно, будут работать в любой версии браузера.

Использование padding при изменении интервала

Однако помимо изменения свойства line-height, существует еще один способ изменить в CSS межстрочный интервал, это будет «игра» со значениями свойства padding. Стилевое свойство padding отвечает за внутренние отступы в любом html-объекте. По умолчанию данное свойство равняется 0. Подбирая различные значения, можно изменить межстрочный интервал, например: .

Работать с межстрочными интервалами очень просто. Достаточно знать основы CSS и уметь подключать файл к основной странице html. Также его можно задать непосредственно на странице с расширением html.

как увеличить межстрочный интервал в css

Для увеличения межстрочного интервала увеличиваем значение свойства:

p.second {

padding: 10px;

}

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

p.second {

padding: 0px;

}

Отрицательное значение межстрочного интервала

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

Изменение межстрочного интервала в списках

Иногда возникает задача изменить межстрочные интервалы в списках <ul> и <ol>. Предыдущие методы не приведут к нужному результату, однако есть одно свойство, которое может изменить интервал в списке — это свойство — margin. Данное стилевое свойство может быть как с положительным, так и отрицательным значением. Покажем изменение межстрочного интервала в списке на примере:

<ul>

<li><a href=»#»>Пункт 1</a></li>

<li><a href=»#»>Пункт 2</a></li>

<li><a href=»#»>Пункт 3</a></li>

</ul>

Для увеличения отступов нужно в CSS-файле прописать следующие строки:

ul li{

margin-top: 10px;

}

Таким образом мы указали, что расстояние от каждого пункта списка увеличивается на 10 пикселей. Причем в данном случае возможно и отрицательное значение. Таким образом, мы можем задать: — margin-top: -15px.

www.syl.ru

межстрочные интервалы CSS :: SYL.ru

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

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

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

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

абзаца;
списков;
;
таблиц;
заголовков;
и всего остального, где вы размещаете текст.

Рассматривая межстрочные интервалы CSS, в первую очередь обращают внимание на следующие атрибуты.

В «Фотошопе» существует понятие Leading. Такого атрибута в CSS нет, но благодаря ему можно пояснить суть. Leading по факту и есть расстояние между строками.

В CSS размер строки задается параметром line-height и font-size. Как видите, на рисунке ясно указано, что font-size — это размер шрифта. Ни одна буква за эти пределы никогда не выходит.

Line-height — это расстояние от середины верхнего Leading до середины нижнего Leading. Стрелочками всё это указано на рисунке.

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

Некоторые думают, почему font-size растянут ниже, чем линия с буквами. Всё просто. Ведь существуют буквы, которые опущены ниже, чем основной уровень строки. Ниже на рисунке — наглядный пример, где используются символы, вытянутые вверх и вниз.

Как видите, буквы как раз занимают весь диапазон font-size. А высота линии больше, и с обеих сторон добавляется равное пространство.

Значение атрибута line-height может быть любым:

пиксели;
дюймы;
пункты;
проценты;
и другие, которые используются в CSS.

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

Если вы будете указывать в процентах, то учитывайте, что 100% в line-height равносильно значению font-size.

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

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

Более детальное оформление

Межстрочные интервалы CSS на самом деле не ограничиваются только вышеуказанными атрибутами. Расстояние еще корректируется атрибутами margin и padding. Если указать атрибут именно как margin=’5px’, то со всех сторон строки (абзаца) будет добавлено расстояние 5 пикселей.

Если вам нужно указать только над абзацем, то можно указать margin-top. Перевод очень простой. Таким образом, можно будет задать отступы с каждой стороны.

Обратите внимание, что есть еще атрибут padding. Она работает точно так же, как и margin. Задать можно как общий отступ, так и конкретное направление (слева, справа, вверх, низ).

Посмотрите внимательно на рисунок сверху. Margin — отступ за пределами объекта, а padding — внутри.

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

Запомните это раз и навсегда. Это очень важный момент при оформлении объектов. Например, благодаря margin можно указать отступы между текстом и картинками внутри него. Если этих отступов нет, то текст будет распложен вплотную к изображению.

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

Иногда это весьма нужное свойство. На рисунке снизу виден пример разной ширины текста.

Пример оформления

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

Попробуйте сравнить два абзаца, указанных на рисунке ниже. Какой текст вам удобнее читать?

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

Для наглядности можете проверить в любом редакторе. Сравним несколько шрифтов.

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

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

Настройка интервалов применяется и в списках. Кроме этого, в стилях списков характерны вышеописанные margin и padding. Благодаря этому списки становятся красивее, чем стандартные. Используя все эти атрибуты, можно задать:

Высоту пунктов списка.
Отступы для текста слева.
Отступы для строк сверху и снизу.
Максимальную ширину каждого пункта.

Заключение

Владея таким набором атрибутов, можно играть с оформлением не только строчек, но и всего, что хотите. Это глобальные параметры, которым подчиняются абсолютно все элементы (исключение — font-size, так как он только для текста).

www.syl.ru

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

В 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.

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

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

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

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

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

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

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

.class1 { line-height:20px; }

.class2 { line-height:16px; }

.class3 { line-height:12px; }

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

Далее применяем эти классы. Результат будет следующим.

примеры изменения расстояния между строками

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

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

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

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

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

Рекомендуется использовать их подсказки, поскольку эти критерии влияют на поисковую выдачу.

fb.ru

между строк, между словами, между буквами и меняем регистр букв средствами CSS

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

line-height: 35px ; — Устанавливает межстрочный интервал
word-spacing: 15px ; — Интервал между словами
letter-spacing: 4px ; — Интервал между буквами
text-transform: uppercase/ lowercase/ capitalize ; — Изменение регистра букв

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

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

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

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
Меняем расстояние между строками с помощью свойства line-height: ;
Меняем расстояние между строками с помощью свойства line-height: ;
Меняем расстояние между строками с помощью свойства line-height: ;
Меняем расстояние между строками с помощью свойства line-height: ;
 
</body>
</html>

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

CSS

p{
    line-height: 25px;
}

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

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

28px. Это и будет расстояние между базовыми линиями шрифта.

Использование множителя удобно тем, что при изменении шрифта расстояние между строк так же измениться пропорционально. Таким образом, расстояние между строк можно регулировать множителем либо любым другим фиксированным значением px, %, em, pt.

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

Следующее свойство, которое мы рассмотрим это свойство word-spacing: ;, позволяющее изменять расстояние между словами. В этом свойстве используются фиксированные значения, и, уже проценты здесь не подходят.

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

CSS

p{
    word-spacing: 15px;
}

Теперь если обновить страницу то между словами увеличится расстояние на 15px.

Имейте ввиду, что если задать свойство text-align: justify; — выравнивание текста по ширине, то свойство word-spacing: ; браузером будет игнорироваться.

Интервал между буквами

Свойство letter-spacing: ; не так актуально и при больших объемах текста редко используется, так как браузер автоматически выбирает оптимальное расстояние между буквами. В основном, применяется это свойство при использовании больших шрифтов в одном двух словах.

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>

</body>
</html>

И задаем само свойство.

CSS

h2{
    letter-spacing: 3px;

    letter-spacing: -3px;
}

Изменение регистра букв

И, четвертое свойство — это text-transform: ;. Данное свойство изменяет регистр букв.

Бывают такие моменты, когда нужно написать какое-то слово полностью из заглавных букв. Для таких случаев и используется свойство text-transform: ;. Чаще всего используется данное свойство для заголовков.

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>

</body>
</html>

Для формирования заглавных букв свойству text-transform: ; задается значение uppercase, что означает upper – верхний и case – регистр.

CSS

h2{
    text-transform:uppercase ;
}

Задав такое свойство все заголовки h2 будут отображены в верхнем регистре.

Точно так же, можно и написать слово из маленьких букв, для этого используется значение lowercase, где lower – обозначает нижний и case – регистр.

CSS

h2{
    text-transform: lowercase;
}

И, если теперь обновить страницу, то все буквы будут отображены в нижнем регистре.

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

CSS

h2{
    text-transform: capitalize;
}

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

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

webteoretik.ru

line-height | CSS | WebReference

Для блочных элементов определяет минимальную высоту строки текста. Для внедряемых строчных элементов (вроде <img>) свойство line-height не оказывает никакого эффекта. Для остальных строчных элементов line-height задаёт высоту, которая используется для расчёта высоты строки блока.

Краткая информация

Значение по умолчанию	normal
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис ?

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

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

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

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

Песочница

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>line-height</title>
  <style>
   h2 {
    line-height: 70%;
   } 
   p {
    line-height: 1.5;
   }
  </style>
 </head> 
 <body> 
  <h2>Нормальный постулат: алгебра или 
  наибольшее и наименьшее значения функции?</h2>
  <p>Эпсилон окрестность, исключая очевидный случай, 
  поддерживает комплексный интеграл по бесконечной области. </p> 
 </body>
</html>

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

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

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

Объект.style.lineHeight

Примечание

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

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

webref.ru
No related posts.

line-height — расстояние между строками

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

Описание

Синтаксис

Значения свойства

Пример

line-height | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

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

Браузеры

CSS межстрочный интервал: варианты решений :: SYL.ru

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

Использование padding при изменении интервала

Отрицательное значение межстрочного интервала

Изменение межстрочного интервала в списках

межстрочные интервалы CSS :: SYL.ru

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

Более детальное оформление

Пример оформления

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

Заключение

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

Высота строк

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

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

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

между строк, между словами, между буквами и меняем регистр букв средствами CSS

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

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

Интервал между буквами

Изменение регистра букв

line-height | CSS | WebReference

Краткая информация

Синтаксис ?

Обозначения

Значения

Песочница

Пример

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

Примечание

Спецификация ?

Спецификация

Браузеры

Автор и редакторы

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