Свойство 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; }

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

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

Главная

Закажите сайт и займитесь бизнесом!

Данную фразу можно услышать и увидеть на многих сайтах, а это ведь не зря!

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

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

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

Важнейшими достоинствами HTML являются:

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

В этом сайте, я постаралась детально описать весь процесс создания собственного Web сайта, а именно публикации готового проекта в Internet с целью предоставления доступа к нему всем пользователям.

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

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

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

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

Обратимся к верхнему меню и если вкладка «Главная» не открыта, то откроем её и направим своё внимание на раздел «Абзац»:

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

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

Замечательно! Мы на верном пути. Щёлкнем мышкой по стрелочке у значка опции:

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

Чаще всего, при настройке междустрочных интервалов в текстах делового характера, используются значения от 1,0 до 2,0.

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

Давайте потренируемся.

У нас есть текст в таком вот виде:

«Хромает» интервал у заголовка. Цифры 2010 как будто не относятся к заголовку. Сам текст состоит из трёх абзацев и у каждого абзаца свой индивидуальный междустрочный интервал, что видно не вооружённым глазом. Если поочерёдно устанавливать курсор вначале каждого абзаца, а затем отрывать уже знакомое окошко значений интервалов, то выделенным будет то значение, которое применено к данному абзацу.

Посмотрим так ли это, на примере двух абзацев - первого и последнего. Установим курсор вначале первой строки первого абзаца (отсчёт сверху вниз):

Затем щёлкнем по стрелочке значка в разделе «Абзац» вкладки «Главная» верхнего меню:

Итак, мы выяснили, что интервал между строками первого абзаца имеет значение 1,0. Теперь же, проведём эксперимент с последним абзацем, повторив знакомые действия:

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

Допустим, основываясь на проведённом экспресс-анализе интервалов строк имеющихся абзацев, включая заголовок, мы решили, что лучшим, для всего текста в целом, будет значение 1,15. Тогда приступим.

Щелчком левой кнопки мыши установим курсор вначале заголовка. Затем нажмём клавишу Ctrl и, удерживая её, ещё раз сделаем щелчок мышкой, - заголовок выделился:

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

Теперь откроем окошко значений интервалов и выберем щелчком мыши то, которое сочли подходящим для этого текста, то есть 1,15:

Цифры 2010 стали ближе, то есть поднялись вверх, но нам, предположим, не понравился интервал со значением 1,15. И мы решаем, что 1,0 лучшее значение для междустрочного интервала заголовка. Применим его.

И вот, что у нас получится:

Изменили мы своё первоначальное решение и по междустрочному интервалу текста. Пусть интервал между строками будет тот же, что и у заголовка, то есть со значением 1,0.

Мы помним и знаем (провели анализ интервалов каждого абзаца), что интервалы строк первого абзаца имеют значение 1,0, так что, редактировать этот абзац не будем.

Перейдём ко второму абзацу (отсчёт сверху вниз).

Поставим курсор вначале абзаца:

Теперь вместо мышки используем клавиатуру компьютера. Нажмём клавишу Shift и, удерживая её нажатой, ударим один раз по клавише перемещения «стрелка вниз» - первая строка абзаца выделилась:

Продолжая удерживать клавишу Shift, ещё один раз нажмём клавишу-стрелку. Выделилась и вторая строка:

Если использовать комбинацию Ctrl+Shift+кнопка-стрелка, то выделяться будут абзацы.

Очень хорошо! Второй абзац выделен, и чтобы установить значение интервала 1,0 рука потянулась в сторону уже порядком соскучившийся по нашей тёплой ладони мышки…. Но мы, всё же, решили продолжить выделение строк без перерыва:

И таким образом действуем до конца последней строки третьего (нижнего) абзаца. И вот два последних абзаца текста выделены, и мы можем установить значение междустрочного интервала равное 1,0. Даже в тот момент, когда мы только лишь навели курсор на значение, текст уже заметно изменился:

И нам остаётся сделать один обычный щелчок мышкой, подтвердив выбор, а затем ещё раз взглянуть на обновлённый текст:

Сделаем нейтральный щелчок левой кнопкой мыши в любом месте для сброса выделения:

Почему же мы сразу не выделили весь текст и не установили значение интервала, а занимались выделением абзацев и даже строк? С ответа на этот вопрос и начнём в следующий раз.

Продолжение следует…

Работая со стилем для текста, вы можете устанавливать необходимые расстояния между символами, словами и строками. Задаются такие расстояния в любых единицах измерения 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 весьма необходимы для оформления текста. Любой специалист всегда их использует, если создает красивый сайт. Благодаря этим атрибутам можно производить любые операции с текстом.

Как правило, большинству верстальщиков не нравится оформление текста по умолчанию в 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, так как он только для текста).