• ×

    • Html расстояние между строк. Изменив расстояние между строчками css кода, вы сможете оформить ваш текст красиво и читабельно

    12.07.2019

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

    Тег

    В HTML позволяет задать абзацы, а атрибут align выравнивает их по левому краю, по правому краю, по центру или по ширине. Помимо них мы будем использовать глобальный атрибут style .

    Выравнивание абзаца

    Можно выровнять абзац, используя атрибут align со следующими значениями:

    text-align: left|right|center|justify|initial|inherit;

    Скопируйте следующий код в файл .html .

    Выравнивание абзаца с помощью атрибута Style

    Этот абзац выровнен по центру

    Этот абзац выровнен по правому краю

    Этот абзац выводится в окне браузера, выровненным по ширине. Распределенный по ширине абзац выравнивается по правому и по левому краю за счет добавления дополнительных пробелов. Вы можете видеть, что края выровненного по ширине абзаца соответствуют краям абзацев, выровненных по левому и по правому краю. В выровненном по левому краю абзаце левый край является ровным, а в абзаце, выровненном по правому краю - правый. Вы видите, что у этого абзаца оба края являются ровными? Это достигается благодаря стилю text-align:justify.

    В окне браузера HTML код абзаца выглядит следующим образом.

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

    Вы можете управлять междустрочным интервалом абзаца с помощью style=line-height . Используйте атрибут style со следующими значениями:

    line-height: normal|number|length|initial|inherit;

    Ниже приведен пример HTML-кода , который выводит абзацы с различными междустрочными интервалами:

    Установка междустрочного интервала с помощью атрибута Style

    В этом параграфе используются два значения для атрибута style. Первый line-height:1.5 определяет полуторный междустрочный интервал для абзаца, а второе значение text-align:justify определяет, что текст абзаца должен распределяться по ширине.

    Этот абзац имеет двойной междустрочный интервал и выровнен по ширине. line-height:2 определяет двойной интервал. Атрибут style не обязательно должен иметь два значения. Но если вам нужно задать два значения, вы можете сделать это, разделив их точкой с запятой.


    Ниже приведено несколько различных способов использования значения line-height для атрибута style :

    : Устанавливает межстрочный интервал 13 пикселей;

    : Устанавливает в HTML расстояние между абзацами в 200% относительно текущего размера шрифта;

    : Устанавливает высоту строки 14 пикселей.

    Отступы

    Я использовал термин »отступы «, чтобы его было проще понять. Но в HTML мы используем промежутки, чтобы создать вокруг объекта пустое пространство. Можно использовать атрибут style со значением padding , чтобы задать для абзаца отступ слева или справа.

    Ниже приводится пример абзацев с отступом слева и справа:

    Отступы абзацев с помощью атрибута Style

    Этот абзац не имеет отступа, он просто выровнен по ширине. Посмотрите на атрибут style элемента P для этого абзаца.

    Для этого абзаца я задал отступ слева в 30 пикселей с помощью стиля padding-left:30px. Также этот абзац выровнен по ширине с помощью стиля text-align:justify. Как вы уже знаете, мы можем использовать несколько значений для атрибута Style, разделяя их точкой с запятой.

    А этот абзац имеет отступ справа в 30 пикселей, но не имеет отступа слева. Он также выровнен по ширине. Значение ‘padding-right’ атрибута style задает отступ справа. Если вы не видите эффекта, уменьшите ширину окна браузера, чтобы абзац HTML, выровненный по ширине, отображался надлежащим образом.


    Отступы между абзацами (отступ перед и отступ после абзаца)

    В HTML или CSS нам это не нужно. Мы можем просто указать стиль padding для элемента

    Padding-top и padding-bottom задают пустое пространство до и после абзаца, которое работает, как отступ сверху или снизу. Посмотрите на приведенный ниже пример тега

    Я установил для первого абзаца HTML отступ 10 пикселей перед вторым и 50 пикселей после второго абзаца:

    Отступы между абзацами с помощью атрибута Style

    Для этого абзаца не заданы отступы до или после. Это обычный абзац, выровненный по ширине. Как вы уже знаете, мы можем выровнять абзац по ширине с помощью кода style=”text-align:justify” внутри тега.

    Этот абзац выронен по ширине. Он также имеет отступ в 10 пикселей перед абзацем и 50 пикселей после. Внутри тега я задал 3 стиля.

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


    Что следует помнить

    • Абзац HTML может быть выровнен с помощью атрибута align или стиля text-align ;
    • HTML будет отображаться по-разному в зависимости от размеров экрана, размеров окна браузера;
    • Добавление дополнительных пробелов или пустых строк в HTML-код не влияет на вывод. Браузер удаляет все лишние пробелы;
    • Теги задают, что должно отображаться, а стили определяют, как это должно выводиться;
    • Стили могут быть заданы тремя различными способами — встроенные (внутри тегов ), внутренние (внутри того же HTML-файла с помощью элемента

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

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

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

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

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

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

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

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 Пример 2

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

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

      Пример 2

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

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

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

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

      Синтаксис

      Селектор { line-height: CSS единицы | проценты | множитель | normal | inherit; }

      Значения

      По умолчанию браузер выбирает межстрочный интервал автоматически (normal ).

      Примеры

      Пример

      line-height - font-size = 35px - 13px = 21px:

      P { font-size: 13px; line-height: 35px; }

      Результат выполнения кода:

      Пример

      Уменьшим промежуток до 21px - 13px = 7px :

      P { font-size: 13px; line-height: 21px; }

      Результат выполнения кода:

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

      Пример

      В данном примере расстояние между строками текста будет line-height - font-size = 13px - 13px = 0px - строки практически слипнуться (хвостики букв верхней строки будут касаться хвостиков букв нижней):

      P { font-size: 13px; line-height: 13px; }

      Результат выполнения кода:

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

      Пример

      В данном примере значение line-height - множитель 1.5 от размера шрифта. Следовательно line-height будет эквивалентен font-size * 1.5 = 13px * 1.5 = 20px . А реальный промежуток между строками будет line-height - font-size = 20px - 13px = 7px :

      P { font-size: 13px; line-height: 1.5; }

      Результат выполнения кода:

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

      Пример

      Увеличим множитель:

      P { font-size: 13px; line-height: 2.5; }

      Результат выполнения кода:

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

      Пример

      Если сделать line-height меньше font-size , то строки вообще налезут друг на друга:

      P { font-size: 13px; line-height: 9px; }

      Результат выполнения кода.

      Обработка пробелов между буквами и словами

      1. Расстояние между словами word-spacing

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

      На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине. Наследуется.

      Синтаксис

      P {word-spacing: normal;} p {word-spacing: 2px;}
      Рис. 1. Расстояние между словами

      2. Расстояние между буквами letter-spacing

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

      Синтаксис

      P {letter-spacing: normal;} p {letter-spacing: 2px;}
      Рис. 2. Изменение расстояния между буквами с помощью свойства letter-spacing

      3. Обработка пробелов white-space

      Свойство обрабатывает пробелы между словами и переносы строк внутри элемента. Не наследуется.

      white-space
      Значения:
      normal Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости.
      nowrap Запрещает переносы строк, за исключением применения
      .
      pre Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк.
      pre-wrap Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо.
      pre-line Удаляет лишние пробелы, за исключением случаев
      .
      initial Устанавливает значение свойства в значение по умолчанию.
      inherit Наследует значение свойства от родительского элемента.

      Синтаксис

      P {white-space: normal;} p {white-space: nowrap;} p {white-space: pre;} p {white-space: pre-wrap;} p {white-space: pre-line;}

      4. Настройка табуляции tab-size

      Для изменения величины отступа, получаемого с помощью клавиши ТAB, используется свойство tab-size . Значения свойства игнорируются, когда установлено одно из трёх значений pre-line , normal или nowrap свойства white-space .

      Работает только для элементов