Разное

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

Содержание

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Изменить расстояние между абзацами текста создаваемых с помощью тега <p>.

Решение

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

Пример 1. Изменение значения отступов у абзаца

HTML5CSS 2.1IECrOpSaFx

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

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

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

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

Как увеличить или уменьшить интервал между абзацами на веб-странице с помощью CSS?

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

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

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

Вот пример таблицы стилей для HTML 4 от Консорциума W3, в которых устанавливается верхнее и нижнее поля равными 1.12em. Поэтому разрыв между абзацами будет составлять 1.12em.

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

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

p {
  margin-top: 1em ;
  margin-bottom: 1em ;
}

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

В приведенном выше примере оба поля имеют одинаковый размер, поэтому расстояние между абзацами составляет 1em.

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

p {
  margin-top: 2em;
  margin-bottom: 2em;
}

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

Для решения проблемы мой читатель использовал следующее правило CSS:

Если применить это правило к блоку с текстом, результат будет следующим:

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

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

p {
  line-height: 2;
  margin-top: 0;
  margin-bottom: 0;
}

Для распознавания абзацев установите отступ первой строки с помощью свойства text-indent.

p {
  line-height: 2;
  margin-top: 0;
   margin-bottom: 0;
  text-indent: 22px;
}

Результат выглядит следующим образом:

Если вам не нравится полученный результат, измените значение отступа.

Данная публикация является переводом статьи «How do I Increase/Decrease the Space Between Paragraphs on a Web Page (CSS)» , подготовленная редакцией проекта.

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

Автор: Администратор

Просмотров: 6320

Теги: css, html, margin, tag p

В этой статье мы расскажем как в HTML документе изменить расстояние между двумя абзацами.

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

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

Изменить же его очень просто, в CSS свойствах прописать желаемые значениям для margin.

Пример:

<p>Значимость этих проблем настолько очевидна, что консультация с широким активом позволяет выполнять важные задания по разработке позиций, занимаемых участниками в отношении поставленных задач. Таким образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации модели развития.</p>
<p>Значимость этих проблем настолько очевидна, что консультация с широким активом позволяет выполнять важные задания по разработке позиций, занимаемых участниками в отношении поставленных задач. Таким образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации модели развития.</p>
p {
	margin:2em 0 1em 0;
}

Вот как это будет выглядеть на странице (Верхний отступ для наглядности мы сделали больше):

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

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

line-height, letter-spacing, word-spacing — учебник CSS

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

Как задать расстояние между строк CSS?

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

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


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

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

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

Межстрочный интервал на CSS | Трепачёв Дмитрий

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

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

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

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

<p> длинный текст... </p> p { font-size: 20px; line-height: 50px; text-align: justify; width: 400px; }

:

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

Значение line-height без единиц

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

К примеру, font-size равен 10px, а line-height — 1.5. В этом случае реальное значение line-height будет 10px * 1.5 = 15px. Ну, а видимый белый промежуток между линиями текста будет 5px: line-height — font-size = 15px — 10px = 5px.

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

Посмотрим применение описанного на примере:

<p> длинный текст... </p> p { font-size: 20px; line-height: 1.5; text-align: justify; width: 400px; }

:

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

Как добавить одинарный/двойной отступ в WordPress

В большинстве текстовых процессоров вы легко можете добавить дополнительные пустые строки. Все, что нужно для этого сделать, это нажать клавишу ENTER несколько раз. Если проявить немного смекалки, то можно изменить форматирование для создания двойной межстрочного интервала после абзацев, увеличить высоту строки и т.д. И вот, часто для новичком является проблемой такое форматирование в визуальном редакторе WordPress. Почему? Потому как в нем нет кнопок форматирования, как на пример в MS Word. В этой статье мы покажем вам как добавить одинарный / двойной межстрочный интервал в WordPress.

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

Добавляем двойной межстрочный интервал

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

Поэтому просто нажимаем Enter после строки, а затем продолжаем печатать на следующей за ней.

Просто проделав это, в зависимости от стилей вашей темы, вы должны увидеть отчетливый отступ между абзацами (т.е. двойной межстрочный интервал).

Добавляем одинарный межстрочный интервал

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

В этом случае вам необходимо нажать клавиши SHIFT + ENTER.

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

Модифицируем высоту строки и отступы

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

Да, вам придется подправить немного CSS кода, однако это не так страшно, как вы думаете.

Открываем файл таблицы стилей вашей темы. Это можно сделать через административную панель WordPress, посетив Внешний вид » Редактор. Также можно использовать FTP, если вам так удобнее.

В вашем CSS файле запускаем поиск класса .post p

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


.post p{line-height: 1.5em;}

Правило CCS, предложенное выше, изменит межстрочный интервал содержимого абзацев на 1.5em. Em — это единица измерения ширины в типографике. Мы используем класс .post, который WordPress автоматически добавляет в область контента для всех записей для того, чтобы точно применить класс к параграфам записей, и исключительно к ним.

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


.post p { 
line-height: 1.5em;
padding-bottom: 15px;
}

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

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

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

VN:F [1.9.22_1171]

Rating: 4.8/5 (25 votes cast)

html — Как добавить пробел между абзацами при использовании сброса css?

html — Как добавить пробел между абзацами при использовании сброса css? — Переполнение стека

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 18к раз

Закрыт .Этот вопрос основан на мнении. В настоящее время он не принимает ответы.

Хотите улучшить этот вопрос? Обновите вопрос, чтобы на него можно было ответить с помощью фактов и цитат, отредактировав это сообщение.

Закрыт 6 лет назад.

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

  


 параграф 2 


 & nbsp; 


 параграф 3 






 параграф 2 






 параграф 3

http: // jsfiddle.net / unknown601 / 0ewvk3c9 /

Ooker

1,9779 золотых знаков1515 серебряных знаков3737 бронзовых знаков

Создан 11 авг.

Тимофей

1,91811 золотых знаков1414 серебряных знаков2828 бронзовых знаков

5

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

Пример: http://jsfiddle.net/kppb0nLx/3/

  / * абзац, за которым следует другой абзац, будет иметь верхнее поле * /
p + p {
    маржа сверху: 8 пикселей;
}

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

Параметры, которые вы указали ( br и p исключительно для интервала), не считаются хорошей практикой. Они не представляют ваш контент семантически и создают дополнительную разметку, которую можно легко заменить с помощью CSS.

Подробнее о прочтении

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

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