Содержание

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

Категория: Полезное, Сайтостроение, Опубликовано: 2017-07-07
Автор:

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

Навигация по статье:

  • Как задать расстояние между строк CSS с помощью line-height?
  • Как задать расстояние между строк CSS с помощью margin и padding?

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

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

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

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

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

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

01.04.2020 Оставить комментарий 359 Просмотров

После вопроса полученного только вчера, я подумал, у меня есть что предложить блогерам, которые хотят более глубже познакомиться с языками 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/>.

 

Предыдущий Вставить код HTML, публикуемый в сообщениях.

Следующий Blogger: продвинуть блог в первую десятку результатов поиска Google

Ознакомьтесь также

Когда вы загружаете из Интернета такие файлы, как изображения, документы и т. Д., Они рассматриваются …

HTML: отступы и интервалы | CSE 154 Неофициальное руководство по стилю

Отступ

Интервалы и отступы должны быть одинаковыми во всем коде. Многие разработчики предпочитают использовать Отступ в 4 или 2 пробела.

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

Вот пример неправильного отступа в HTML:

Я абзац!



  
Я еще один абзац!



<р>


Я заголовок внутри абзаца!

Вот несколько примеров хороших отступов в HTML:

Я абзац!




  Я другой абзац!





  

    Я заголовок внутри абзаца!

Поместите разрыв строки после каждого элемента блока. Не размещайте более одного блочного элемента на та же линия.

Привет, как дела?
 
Все в порядке

 
Привет, как дела?


Я в порядке
Вложенные теги

Закрывайте теги в порядке, обратном порядку открытия.

Всегда вкладывать каждый встроенный элемент внутрь блочного элемента.
Например, не помещайте тег непосредственно в корпус ; вместо этого поместите его внутрь p или li или другой элемент блочного уровня.

Форматирование строки

Длинные линии

В вашем HTML-коде не должно быть строк длиннее 100 символов. Если какая-либо строка длиннее 100 символов, разбить ее разделить на несколько строк.

Исключение: При использовании длинного URL-адреса вы можете оставить его в одной строке. если он длиннее 100 символов (разбивать URL-адрес на части — это худший стиль чем иметь это исключение для длинных строк).

Пустые строки

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

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

Привет, как дела?


 

Я в порядке



Здравствуйте,

 
 
как дела?


Я в порядке

 
Здравствуйте, 

как дела?

Расстояние

Интервал в тегах

Не размещайте пробелы между тегами < фигурная скобка и имя элемента.

Самозакрывающиеся этикетки и интервалы

Самозакрывающиеся теги могут использовать синтаксис или . Однако вы должны соответствовать тому стилю, который используете.

При использовании стиль, перед закрывающими /> всегда должен быть пробел.

Форматирование и отступ вашего HTML

На этой странице…

    Зачем делать отступ в коде?

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

    Неправильный метод 1: Все в одной строке 

     
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercation ullamco Laboris nisi ut aliquip ex ea commodo consequat.

    Проблемы:

    • Трудно понять, где заканчивается код и начинается текст/контент
    • Трудно увидеть, где

      есть, даже с включенным накруткой

    Неправильный метод 2: 3 строки, но без отступа 

     <р>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut Labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation
ullamco Laboris nisi ut aliquip ex ea commodo consequat.

    ИЛИ

     <р>
Х. П. Лавкрафт

    Проблема: поскольку все находится на левом поле, трудно отличить код от текста/контента.

    Лучший способ: отступ текста/контента 

     <р>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.

    Преимущества:

    • Начало (

      ) и конец (

      ) находятся на одном уровне, поэтому легко увидеть, что вы закрыли код, а также увидеть, где код начинается и заканчивается
    • Легко отличить код от текста/контента

    Примеры отступов кода

    Вот несколько примеров того, как WebSanity любит делать отступы в нашем коде.

    Элементы блочного уровня 

     <р>
    Лорем ипсум.

     
     <р>
    Лорем ипсум
    
    Долор сит амет

     
     <цитата>
    
    
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
        ut Labore et dolore magna aliqua.

    Примечание. Обратите внимание на отступ текста/контента внутри

    , а затем

    с отступом внутри <цитата> . Это называется , вложенным в . Видите, как легко сказать, что является дочерним элементом чего?

     <таблица>
    
        <тд>
            Lorem ipsum dolor sit amet
        
        <тд>
            Consectetur adipisicing
        
    
    
        <тд>
            Lorem ipsum dolor sit amet
        
        <тд>
            Consectetur adipisicing

    Примечание. Опять же с несколькими уровнями отступов — но должно быть очевидно, насколько это помогает читать этот код!

    Исключения 

      
    Название страницы

    Примечание. Мы не делаем отступ

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

     <голова>
    …
    Название документа

    Примечание. Опять же, мы не делаем отступ </code> и большинство других элементов внутри<head>, потому что они короткие.</p></blockquote><pre> <ул> <li>Лорем</li> <li>Ипсум</li> <li>Долор</li> </ul> </pre><blockquote><p> Примечание. Мы не делаем отступ <code><li> </code>, потому что в большинстве случаев содержимое короткое, потому что нас больше волнует <code><ul> </code> & <code></ul> </code> , и потому что это действительно может удлинить общий код.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files1/slide/y/ykmF4i5MKBwW3zn1VeNHbJhdfQuDqYTo7jZPsO/slide-84.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files1/slide/y/ykmF4i5MKBwW3zn1VeNHbJhdfQuDqYTo7jZPsO/slide-84.jpg' /></noscript> Тем не менее, если вы хотите сделать отступ <code><li> </code> , не стесняйтесь.</p></blockquote><h3><span class="ez-toc-section" id="i-24"> Встроенные элементы </span></h3><p> Вы никогда не делаете отступы для встроенных элементов. Относитесь к ним как к тексту/контенту. Примеры:</p><pre> <р> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod tempor</em> Incididunt ut Labore et <code>dolore магна аликва</code>. Ut enim ad minim veniam, <font size="5">quis nostrud</font> упражнение ullamco <a href="http://www.demonoid.me">laboris nisi ut aliquip</a> ex ea commodo consequat. </p> </pre><pre> <цитата> <p> Lorem ipsum dolor sit amet, <a href="http://www.avclub.com">consectetur adipisicing elit</a>, sed do <strong>eiusmod tempor</strong> incididunt ut Labore et <em>dolore</em> magna aliqua. </p> </blockquote> </pre><h3><span class="ez-toc-section" id="i-25"> Как насчет базовой структуры веб-страницы? </span></h3><p> Посмотрите на следующий код. можно подумать <code><head> </code> & <code><body> </code> будет иметь отступ внутри <code><html> </code> — в конце концов, они дети <code><head> </code> , так что не должны ли они быть отступом?</p><pre> <html> <голова> <title>Название документа <тело>

    Название страницы

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt

    Так почему же и не имеют отступа? Несколько причин:

    • Вы знаете, что и являются потомками ; на самом деле они всегда только дети , так что нет необходимости напоминать себе об этом через вложение
    • Вы экономите один уровень на отступе; когда вы начинаете вкладывать HTML внутри HTML внутри HTML внутри HTML, это может добавить

    Ваш текстовый редактор должен позволять легко создавать отступы в коде

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

    Автоматический отступ

    BBEdit, например, имеет настройку в своих настройках для «Автоматического отступа», которая определяется следующим образом: «Когда эта опция выбрана, нажатие клавиши «Возврат» в новых окнах автоматически вставляет пробелы или табуляции для отступа новой строки до на том же уровне, что и предыдущая строка».

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

    Пробелы или табуляции? (Пробелы!)

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

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

    • BBEdit : Настройки > Параметры редактора по умолчанию > Автоматически разворачивать вкладки
    • Komodo Edit : Параметры/Настройки > Редактор > Отступ > Предпочитать символы табуляции вместо пробелов
    • Notepad++ : Настройки > Языковое меню/Настройки вкладок > Заменить пробелом

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

    Сколько пробелов?

    Следующий вопрос: сколько пробелов вставляется при нажатии клавиши TAB? В основном люди выбирают 2, 4 или 8 мест. По мнению WebSanity, 8 — это слишком много, 4 — приемлемо, но слишком много, а 2 — в самый раз. С 2 вы можете видеть отступ, но большое количество вложений не увеличивает ваш код до нелепых размеров, как вы можете видеть в следующем:

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

    No related posts.