Css увеличить расстояние между строк. Форматирование HTML-абзаца

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

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

Высота строк

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Class1 { line-height:20px; }

Class2 { line-height:16px; }

Class3 { line-height:12px; }

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

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

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

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

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

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

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, так как он только для текста).

Это одна из самых востребованных настроек текста. Разные типы документов требуют разного расстояния между строками. Поэтому пользователи часто сталкиваются с необходимостью увеличить или уменьшить расстояние между строками в Word. В этом материале мы расскажем о том, как это делается на примере Word 2003, 2007, 2010, 2013 и 2016.

Как уменьшить межстрочный интервал в Word 2003, 2007, 2010, 2013 или 2016

Для того чтобы уменьшить расстояние между строками в Word 2007, 2010, 2013 или 2016 вам необходимо выделить текст (чтобы выделить весь текст нажмите CTRL+A), перейти на вкладку «Главная» и нажать на кнопку, которая называется «Интервал». Данная кнопка будет находится немного правее настроек шрифтов (скриншот ниже).

В Word 2003 также есть такая кнопка. Она находится на панели инструментов.

После нажатия на кнопку «Интервал» откроется выпадающее меню, с помощью которого можно указать межстрочный интервал для текста. Например, вы можете выбрать интервал «1.0», это немного уменьшит расстояние между строками.

Если этого мало, то вы можете еще больше уменьшить расстояние между строками. Для этого нужно выделить текст, нажать на кнопку «Интервал» и выбрать пункт меню «Другие варианты межстрочных интервалов».

После этого перед вами откроется окно «Абзац» на вкладке «Отступы и интервалы». Здесь внизу справа есть блок для настройки расстояния между строками. Для того чтобы уменьшить расстояние просто укажите меньшее значение и закройте окно нажатием на кнопку «Ok» (скриншот внизу).

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

• Одинарный – интервал между строками выбирается в зависимости от самого крупного шрифта в строке.
• 1.5 строки – интервал между строками равняется 1.5 строки. Фактически, это тот самый .
• Двойной – интервал между строками выбирается в зависимости от самого крупного шрифта в строке и умножается на 2.
• Минимум – минимальный межстрочный интервал, необходимый для нормального отображения всех букв алфавита.
• Точно – точный размер интервала в пунктах.
• Множитель – стандартный способ настройки межстрочного интервала. Увеличивает одинарный интервал в заданное число раз.

Например, если выбрать вариант «Точно», то можно настроить точное значение расстояния между строками в пунктах.

Для сохранения настроек не забудьте нажать на кнопку «Ok».

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

Поднимем руки над клавиатурой и да раздвинем строки!

На всякий случай начну главу с пояснения «что такое межстрочный интервал».

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

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

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

line-height предусматривает два встроенных ключевых слова:

• normal – вычисление расстояния между строками абзацев происходит автоматически;
• inherit – наследуется форматирование объекта-родителя.

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

Однако обычно указывается просто тип отступа в виде цифры. Например, line-height: 1.5 ; оповещает , что в контенте выбран полуторный межстрочный интервал.

Думаю, особо любопытные задались вопросом: «Как же работает такой механизм?». Ответ очень прост: при помощи умножения. Интерлиньяж устанавливается, начиная от базовой линии. Если значение свойства указывается цифрой, то она распознается как множитель, на который и идет умножение базового значения.

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

А теперь пришло время таблиц!

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

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

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

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

У свойства border-spacing нет ключевых слов, поэтому значения указываются в виде единиц измерения. Можно установить как одно значение, так и два. Во втором случае первый параметр определит интервал по горизонтали, второй – по вертикали.

Перейдем к практике. Информацию из предыдущего примера занесем в таблицу.

Глобализация

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

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

Способы удаления интервалов

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

1. С первым все понятно – вам нужно просто посмотреть, нет ли где лишнего абзаца;
2. В случае с программным вариантом подразумевается использование встроенной функции Ворда. Она может показать знаки, которые в обычном тексте не видны. О ней поговорим подробнее.

Функция неотображаемых символов

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

Чтобы найти интервалы, на панели управления на вкладке «Главная» найдите раздел «Абзац». Затем нажмите кнопку с таким значком «¶». Это значок отображаемых символов. Активировав функцию, вы увидите, как между пробелами появилась точка. Будут видны и другие символы, в том числе знаки абзаца. Это очень полезная опция. Она не меняет текст в печатном формате, зато позволяет более тщательно изучить текст перед отправкой на печать.

Если расстояние между строк слишком большое, возможно, между ними стоят интервалы. Откройте вкладку «Главная» и в меню «Стили» установите значение «Без интервалов». Если данная опция не видна, значит, она не отображается на панели задач. Чтобы ее открыть, щелкните по кнопке со стрелкой и выберите необходимый пункт.

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

Выделив необходимый фрагмент на вкладке «Разметка страницы», выберите пункт с маленьким значком стрелки. Можно сделать по-другому: кликнуть правой клавишей мышки по тексту и из открывшегося меню выбрать раздел «Абзац» (это можно сделать в любой из версий ворда: 2003, 2007, 2010).

Появится окно, в котором перейдите в пункт «Отступы и интервалы». В пункте «Интервал» укажите нужный тип интервала (одинарный, минимум). Можно также выбрать режим «множитель» или «точно», тогда необходимо будет указать значение. Для ввода значения используйте функциональные кнопки «вверх»/ «вниз» прямо в окне или введите его с помощью клавиатуры. Для применения настроек нажмите «ОК». Теперь расстояние между строками будет везде одинаковым.

Описание интервалов

При работе с межстрочным интервалом в ворде 2007 и 2010 вам могут пригодиться следующие знания:

• «Одинарный» интервал аналогичен самому большому шрифту, который был использован в выделенном фрагменте текста;
• «Полуторный» – это расстояние, которое превосходит предыдущий интервал в полтора раза;
• «Двойной» – соответственно, превышает показатели одинарного интервала в 2 раза. То есть, размер шрифта будет в два раза больше, чем максимальный шрифт в выделенном фрагменте;
• «Минимум» – это минимальное значение. В интервале остается столько места, чтобы в нем могла поместиться буква, соответствующая шрифту в тексте;
• «Точно» – вы можете сами настроить значение интервала;
• «Множитель» – данное расстояние пропорционально определенному коэффициенту. В соответствии с ним интервал будет уменьшаться или увеличиваться. Например, если вы задали множитель 1,4, то расстояние между строк увеличится на 40%.

Удаление интервалов между строк в ворде 2007 и 2010 – рутиная процедура, выполнить которую может даже человек, только что установивший Ворд на свой компьютер. Используя настройку интервалов, вы быстро отредактируете документ в соответствии со своими потребностями. А при помощи функции неотображаемых символов вы сможете уменьшить расстояния между строк.