Увеличение расстояния между абзацами с тегом <br> в CSS

Быстрый ответ

Для настройки интервалов после строк текста рекомендуется использовать CSS-отступы, вместо <br>, поскольку они позволяют более точно контролировать пространство. Просто задайте margin-bottom для предыдущего элемента:

<!-- Забудьте о <br>, и используйте отступы! -->
<div style="margin-bottom: 20px;">Текст перед переходом на новую строку.</div>

Такой подход обеспечивает гибкость в регулировке высоты интервалов, заменяя собой традиционный <br>.

Тег <br>: не лучший выбор для отступов

Использование нескольких тегов <br> для создания пространства — это не лучшая практика, поскольку HTML не предназначен для таких целей. Используйте семантические и гибкие CSS решения для переносов на новую строку.

Равномерные переносы строк

Установите единый line-height для контейнера, чтобы обеспечить постоянство вертикального ритма:

.container {
  line-height: 1.5em; /* Задайте и наслаждайтесь единообразием */
}

Убедитесь, что текст находится внутри container, чтобы эффект был применен равномерно.

Подробнее об этом расскажет наш спикер на видео

Стилизация тега <br>

Если структура HTML не предусматривает иного, примените стили непосредственно к <br>:

br {
  display: block;
  margin-top: 15px; /* Пределов нет */
}

Отказываемся от <br>

Когда вам требуется создать достаточное пространство, замените <br> на более подходящие HTML-элементы:

<section class="subparagraph">
  <p>Первый абзац.</p>
  <!-- Больше абзацев ведёт к меньшему утомлению при чтении -->
</section>

<style>
  .subparagraph p + p {
    margin-top: 30px; /* Отделяем мысли, как на Уолл-стрит */
  }
</style>

Добавление пространства с помощью псевдоэлементов

Псевдоэлементы ::before и ::after позволяют тонко настроить пространство:

.element::after {
  content: "";
  display: block;
  height: 20px; /* Прямое попадание */
}

Визуализация

Представьте тег <br> как инструмент для создания интервалов (🧩) между книгами (📚📚):

До переноса: 📚📘  |  📚📕
         <br>  :   🧩 <-- Стандартный интервал
После переноса: 📚📘
                 📚📕

Настройка размера инструмента дает вам желаемый результат:

До переноса: 📚📘  |  📚📕
Настроенный <br>  : 🔧🔭🔧 <--- Изменённый интервал
После переноса: 📚📘
                🧩🧩🧩
                📚📕

Главное правило: Настройте line-height или используйте margin для блочных элементов <span> или <div>, чтобы безупречно контролировать пространство!

Обеспечение единообразия в разных браузерах

Создание дизайна, который будет выглядеть одинаково в разных браузерах, похоже на приручение кошек. Единообразие — это ключ к успеху! JavaScript поможет вам в этом, выравнивая различия между Internet Explorer и другими браузерами.

Управление пространством с помощью JavaScript

Динамические изменения стилей через JavaScript позволяют настроить интервалы:

// Если бы мы могли перенастроить реальность одним кликом...
const breaks = document.querySelectorAll('br');
breaks.forEach(br => {
  br.style.display = 'block';
  br.style.marginTop = '10px' // Высота: как на вершине мира
});

Использование классов обеспечивает единообразие и организованность:

// Установите и забудьте: создайте класс для многократного использования
.increased-space {
  display: block;
  margin-top: 10px;
}

// Ваш надежный помощник JavaScript
const breaks = document.querySelectorAll('br');
breaks.forEach(br => {
  br.classList.add('increased-space');
});

Невидимый, но полезный: hr

Замена <br> на hr позволяет создать пространство, которое будет корректно отображаться во всех браузерах:

<!-- Видимость по желанию -->
<hr class="invisible-space"/>

<style>
  .invisible-space {
    border: none;
    height: 20px; /* Невидимость: гарантирована */
    background-color: transparent;
  }
</style>

Элемент hr хорошо поддерживается всеми браузерами и является безопасным решением для создания пространства.

Важные замечания

• Приоритет должен отдаваться доступности; использование <br> в качестве макетного элемента может вызвать путаницу для программ чтения с экрана.
• Избыточное пространство может нарушать визуальное восприятие. При его использовании проявляйте осмотрительность и умеренность.

Полезные материалы

1. Полное руководство по элементу Table | CSS-Tricks — CSS-Tricks обучит вас порядку в дизайне.
2. Категории содержимого – HTML: Гипертекстовый язык разметки | MDN — MDN глубоко погружается в структуру содержимого HTML, включая упоминание <br>.
3. Тег br в HTML — W3Schools демонстрирует основы использования <br>, которые необходимы для начинающих.
4. Как динамически создать CSS-класс в JavaScript и применить его? – Stack Overflow — Stack Overflow обсуждает манипуляцию CSS с помощью JavaScript, которая является актуальной для корректировки интервалов, таких как высота <br>.
5. Обучение HTML и CSS: Руководство для начинающих – Часть 1 — SitePoint помогает разобраться с блочными и встроенными элементами HTML, которые критически важны для понимания процесса позиционирования.
6. ::before / ::after | CSS-Tricks — CSS-Tricks подробно разбирает псевдоэлементы, которые могут служить заменой <br> при регулировании пространства.
7. HTML стандарт — Документ HTML Стандарт, содержит информацию о сложных элементах, в том числе и о <br>.