Как изменить расстояние между абзацами текста html

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

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

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

Изменить высоту между строк в шаблоне

Если вы намерены изменить расстояние между строками на всех страницах блога, то вы обязательно должны работать в шаблоне. После сохранения шаблона перейдите на Тема> Изменить HTML и найти блок с кодом .post-body, используя Ctrl + F. Вы видите код, который в некотором роде будет иметь структуру, подобную этой

.post-body {  font-size: 110%;  line-height: 1.4;  position: relative;}

Просто измените значение параметра line-height, чтобы изменить расстояние между линиями.

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

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

Замените <p> на <p style=»margin-bottom:-15px;»>, чтобы уменьшить расстояние от абзаца, находящегося непосредственно под ним.
Замените <p> на <p style=»margin-top:-15px;»>, чтобы уменьшить расстояние от пункта, который находится непосредственно над этим

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

Как установить расстояние для всех абзацев сообщения

Чтобы установить расстояние с одинаковыми значениями между всеми абзацами поста, мы можем редактировать код в одной статье в режиме HTML или даже в шаблоне. Чтобы изменить один пост, просто откройте редактор и перейдите к HTML, который находится рядом с Создать. Просто между тегом </p>, указывающим конец абзаца, и тегом <p>, указывающим начало следующего абзаца,  вставьте

<p style=»margin-bottom:-12px;»></p

что приведет к такому результату

Чтобы изменить шаблон, перейдите в Тема> Редактировать HTML, найдите строку  </b:skin> и, чуть выше, вставьте эту строку кода

.post-body p {margin-bottom:-8px;}

Сохранить шаблон. Результат будет следующим

Очевидно, что числовые данные -8px могут быть изменены. Также необходимо, чтобы абзацы были определены с помощью тега <p> и не использовали переход на новую строку <br/>.

Что такое абзац в html

Для обозначение абзаца в html существует отдельный тег абзаца .

Обозначение абзаца в html

Тег абзаца в html обозначается буквой p, обернутой с двух сторон треугольными скобками:

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

Друзья!

Мне очень нужны подписчики!
Пожалуйста подпишись на Дзене!
Заранее спасибо!

Абзац в html

И как это не проиллюстрировать на видео:

Как делать абзацы в html

Чтобы как-то наш абзац был виден, давайте покрасим каждый абзац в какой-то цвет!

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

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

И пусть данный абзац будет зеленым. Когда я пишу зеленый то сразу вспоминаю свою дочку, потому, что когда её спрашивали, как твоя фамилия — она отвечала ЗЕЛЕНАЯ!

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

Я раньше так и делал! Брал каждую строку. и оборачивал её а абзац! Сейчас я конечно такого не делаю, для этого есть способ проще.

Какое свойство отвечает за расстояние между абзацами!?

Чтобы увеличить расстояние между абзацами, вам нужно представлять, что происходит между абзацами!

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

Справа — красный вопрос — мы видим, что абзац синего цвета, но никаких стилей данному абзацу не принадлежит… но если мы взглянем ниже вопроса, то увидим какие-то стили, которые… непонятно где находится…

user agent stylesheet

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

И если мы посмотрим выше, на строки желтые полоски — то вот собственно, что нам и нужно, как видм, какие-то зазоры между абзацами существуют!

Эти два свойства:

Свойство по умолчанию верхний отступ между абзацами:

margin-block-start: 1em;

Свойство по умолчанию нижний отступ между абзацами:

margin-block-end: 1em;

Не обязательно использовать именно эти свойства,

В смысле того, что вместо этого можно написать — это будет аналогично:

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

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

С теорией вроде бы разобрались, давайте перейдем к примерам!

Первый будем увеличивать расстояние между абзацами

Поместим опять наш текст в блок и увеличим расстояние между блоками до 3em? т.е. три высоты шрифта…

<style> blockexample1 p { margin-top: 3em;}</style>

Результат;

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

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

И пусть данный абзац будет зеленым. Когда я пишу зеленый то сразу вспоминаю свою дочку, потому, что когда её спрашивали, как твоя фамилия — она отвечала ЗЕЛЕНАЯ!

Как уменьшить расстояние между абзацами в html -> пример

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

<style> blockexample2 p { margin-bottom : -15px;;}</style>

Результат:

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

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

И пусть данный абзац будет зеленым. Когда я пишу зеленый то сразу вспоминаю свою дочку, потому, что когда её спрашивали, как твоя фамилия — она отвечала ЗЕЛЕНАЯ!

Чем отличается расстояние между абзацами margin-bottom и margin-top

Чем отличаются друг от друга расстояние сверху абзаца, либо расстояние снизу абзаца!?

Если используется margin-top, то конец последнего элемента не будет иметь margin-top…

И наоборот…

Если используется margin-bottom , то начало первого элемента не будет иметь margin-bottom …

Я предполагаю, что вы в таком состоянии :
смайлы

Поисковые запросы на тему Абзац в html пример

Дополнительно о поисковых запросах, которые кроме того, могут быть смешными, тупыми и т.д.

тег необособленного абзаца в html

Ээээ…. чтоооо… -> тег необособленного абзаца в html… такого не бывает!
смайлы

HTML: Абзац и красная строка

• Абзацы
• Красная строка

Абзацы

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

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

Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег <p>, который разделяет фрагменты текста вертикальным отступом (до и после абзаца добавляется пустая строка).

<p>Абзац</p>

Не забывайте про закрывающий тег

Большинство браузеров будут отображать HTML документ корректно, даже если вы забыли про закрывающий тег.

<p>Абзац
<p>Другой абзац</p>

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

Красная строка

Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» — это означает начало новой мысли, главы или части.

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

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

<html>
  <head>
    <style>
	  p { text-indent: 25px; }
	</style>
  <head>
  <body>

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

  </body>
</html>

Попробовать »

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

<p style="text-indent: 25px;">
  Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым
  некоторые относят и красную строку, считая, что употребление ее не так уж и важно.
  Однако надо понимать, что любая запятая несет в себе как эстетическую, так
  и смысловую нагрузку, а не только является данью правилам грамматики – это
  касается и форматирования.
</p>

Попробовать »

Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства ( например: -30px).

Продолжаем наш практикум по HTML (что это такое?) — в сегодняшней инструкции вы узнаете, как разделить сплошной и цельный текст в HTML при помощи абзацев. Также я расскажу, как правильно делать и вставлять теги абзаца, изменять отступ и расстояние между параграфами.

Абзацы в HTML

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

Блоки текста в HTML разделяются между собой при помощи тегов абзаца <p></p>. По вертикали между абзацами появляется небольшой отступ или отбивка.

Как разделить текст абзацами? Пример:

<p>Первый абзац, помещенный в теги p</p>
<p>Второй абзац, помещенный в теги p</p>

Результат

Первый абзац, помещенный в теги p

Второй абзац, помещенный в теги p

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

Если между вашими абзацами получаются слишком большие отступы (пустые строки), не вздумайте использовать тег <br> для их уменьшения, лучше обратите внимание на файл style.css, в котором прописаны параметры отступов между абзацами. Тег <br> используется для переноса строки — это совсем другое и не следует использовать его для создания абзацев. Что такое перенос строки и зачем он нужен, читайте тут.

Что вы найдете в файле style.css? Вы найдете параметры отступов, стили margin и padding (надеюсь вы знаете о разнице между этими свойствами) применяемые к абзацу и задающие для него отступы, в том числе сверху и снизу. Найдя эти стили, вы сможете их изменить, увеличив или уменьшив отступы между абзацами.

Атрибуты тега абзаца в HTML

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

<p align=»left»>Выравниваем абзац по левому краю.</p>
<p align=»right»>Выравниваем абзац по правому краю.</p>
<p align=»center»>Выравниваем абзац по центру.</p>
<p>Выравниваем абзац по ширине.</p>

Результат:

Выравниваем абзац по левому краю.

Выравниваем абзац по правому краю.

Выравниваем абзац по центру.

Выравниваем абзац по ширине.

Бонус — красная строка и отступы в абзаце

Для удобства восприятия письменного текста в школе нас заставляли делать на первой строке абзаца «красную строку» — небольшой отступ слева от линии основного текста.

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

<p></p>

Обратите внимание, что я делаю это для примера и поэтому применил свойство в HTML, а не в файле CSS (что такое CSS и зачем он нужен?). Если вы хотите отредактировать подобным образом все абзацы на вашем сайте, добавив красную строку, нужно внести изменения в файл style.css.

Либо добавьте в HTML-код страницы код (можно задавать размер отступа в px, либо в %):

<style>p {text-indent: 10%; /* Задаем красную строку — отступ в абзаце */}</style>

Ну вот и все что нужно вам знать по этой теме. А в следующих статьях я расскажу вам о тегах <NOBR> и <BR>, которые применяются в особых случаях.

blogwork.ru

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

Не в HTML тут дело даже. И не командой, а тегом. Даже не самим тегом, а с помощью стиля CSS.

Кури этот сайт: htmlbook. ru :

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

<html>
<head>
<meta>
<title>Отступы в тексте</title>
<style>
p {
margin-top: 0.5em; /* Отступ сверху */
margin-bottom: 1em; /* Отступ снизу */
}
</style>
</head>
<body>
<p>Солнце яркое светило,
Ветер выдался попутный —
Путешественникам выпал
Путь приятный и нетрудный.
Вдруг вдали корабль пиратов
Показался с длинным флагом;
Был таран на нем поставлен,
Приготовленный к атакам. </p>
<p>Завывая громко в трубы,
Шли грабители навстречу,
Грозным голосом кричали,
Вызывая всех на сечу.
Корабельщики в испуге
Побелели, точно мел.
Только витязь был спокоен,
Только он не оробел. </p>
</body>
</html>

Результат:

Солнце яркое светило,
Ветер выдался попутный —
Путешественникам выпал
Путь приятный и нетрудный.
Вдруг вдали корабль пиратов
Показался с длинным флагом;
Был таран на нем поставлен,
Приготовленный к атакам.

Завывая громко в трубы,
Шли грабители навстречу,
Грозным голосом кричали,
Вызывая всех на сечу.
Корабельщики в испуге
Побелели, точно мел.
Только витязь был спокоен,
Только он не оробел.

http://htmlbook.ru/faq/kak-izmenit-rasstoyanie-mezhdu-abzatsami-teksta
http : // htmlbook .ru / faq / kak-izmenit-rasstoyanie-mezhdu-abzatsami-teksta

otvet.mail.ru

css — CSS box model (поля и отступы) для вертикального интервала между абзацами

Хе-хе, ну… веб-браузеры разные, я бы сказал, что все хорошо с Firefox, как правило, хорошо сочетается со стандартом, но это не совсем так.

В соответствии с xhtml1-strict.dtd только < li/ » > может быть дочерним по < ul/» > . Я предлагаю вам стать дизайнером, который знает о стандартах. Это формальные спецификации, с помощью которых вы можете проверить свой HTML.

<p>Paragraph.</p>
<ul>
    <li>List item.</li>
    <li>Another list item.
    <p>List paragraph.</p> <!--illegal here-->
    </li>
</ul>

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

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

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

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

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

p { margin: 1em 0; }
ul { margin: 1em 0; }
ul > li { margin: 1em 0; }

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

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

qaru.site

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

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

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

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

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

impuls-web.ru

css — Как изменить интервал (между строками/абзацами) в моем нижнем колонтитуле — css? Код ниже — от responsive.css wordpress

Как изменить интервал (между строками/абзацами) в моем нижнем колонтитуле — css? Код ниже — от responsive.css wordpress

это от responsive.css часть моего wordpress

Я хочу, чтобы расстояние было ближе, чем сейчас, вы можете проверить его, посетив www.hotdatajobs.digitalya.ro

/* new changes footer */
    @media ( max-width: 640px ) {
        .col-xs-12.p-t-20.padding-l-r-10 span {
            font-size: 18px;
        }
        .site-footer {
            padding-top: 40px;
        }
        .footerRow .col-md-15.col-sm-15.col-xs-12 .title-block {
            margin-bottom: 10px;
        }
        .m-h-f {
            min-height: 295px;
        }
        .m-h-l {
            min-height: 170px;
        }
    }

    @media ( max-width: 440px ) {

        .m-h-f,
        .m-h-l {
            min-height: 100px;
            margin-bottom: 20px;
        }

        .m-h-f {
            min-height: 230px;
        }

        .p-l-f {
            width: 150px!important;
        }

        .site-footer .footerRow .footer-social-item {
            font-size: 16px;
        }
        .site-footer .footerRow a {
            font-size: 14px;
        }
        .col-xs-12.p-t-20.padding-l-r-10 span,
        .site-footer .title-block {
            font-size: 16px;
        }
    }

    @media ( max-width: 374px ) {

        .m-h-f,
        .m-h-l {
            min-height: 100px;
            margin-bottom: 20px;
        }

        .m-h-f {
            min-height: 225px;
        }

        .p-l-f {
            width: 110px!important;
        }

        .footerRow .col-xs-12 {
            padding: 0;
        }
        .site-footer .footerRow .footer-social-item {
            font-size: 14px;
        }
        .site-footer .footerRow a {
            font-size: 12px;
        }
        .col-xs-12.p-t-20.padding-l-r-10 span,
        .site-footer .title-block {
            font-size: 14px;
        }
    }
    /* end general */

задан user3726808 20 июля ’16 в 23:502016-07-20 23:50
источник
поделиться

qaru.site

Чтобы изменить расстояние между строками в 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> h1 { ine-height: 70%; } p { line-height: 1; } </style> </head> <body> <div> <h1>Заголовок</h1> <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> <h1>Заголовок</h1> <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 пунктов

---

---

---

8 простых способов улучшить типографику в вашем дизайне перевод

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

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

1. Размеры

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

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

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

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

6. Выделение

7. Масштаб

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

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

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

• Five Simple Steps to Better Typography
  Mark Boulton
• Incremental Leading
  Mark Boulton
• Compose to a Vertical Rhythm
  Richard Rutter — 24 Ways
• Setting Type on the Web to a Baseline Grid
  Wilson Minor — A List Apart
• Setting Web Type to a Baseline Grid
  Craig Grannell — Opera
• The Elements of Typographic Style Applied to the Web
  Robert Bringhurst
• How to Size Text in CSS
  Richard Rutter — A List Apart
• Baseline Rhythm Calculator
  Geoffrey Grosenbach
• Detail In Typography
  Jost Hochuli
• The Elements of Typographic Style
  Robert Bringhurst
• Thinking with Type
  Ellen Lupton
• Grid Systems in Graphic Design
  Josef Müller-Brockmann