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

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


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

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

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

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

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

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

Этот код с размером шрифта: 110%; устанавливает шрифт текста на 110% от текста по умолчанию, а высота строки: 1.4; эквивалентно высоте строки: 1.4emи устанавливает высоту строки в 1,4 раза, что от размера шрифта. Высота линии также может быть задана в пикселях, таким образом line-height: 20 px; и он будет отключен от размера шрифта, Однако ссылка на размер шрифта необходима, когда, например, абзац публикуется с очень большими шрифтами, поскольку в противном случае строки могут перекрываться.
 
это дает результат согласно следующему скриншоту.

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

Просто измените значение параметра 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/>.

ОткрытьЗакрытьКомент
Cancel