Межстрочное расстояние (line-height)

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Опубликовано 17.03.2025
Просмотры 5
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер CSS

Этот тренажер посвящен свойству CSS `line-height`. Вы выполните серию практических заданий, где нужно будет заполнить пропуски в CSS-коде, чтобы управлять межстрочным интервалом текста. Задания охватывают использование различных значений `line-height`: числовых (без единиц измерения), `normal`, процентных, а также применение свойства к разным элементам для достижения нужного визуального эффекта. Каждое задание сопровождается HTML-разметкой и CSS-стилями, которые вы будете модифицировать. После внесения изменений вы сможете сразу увидеть результат.

Список тем

Установка межстрочного интервала без единиц измерения

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

CSS
p {
  font-size: 16px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Установите межстрочный интервал равным 1.5 */
  line-height: input1;
}
HTML
<p>Это пример текста в несколько строк. Ваша задача - изменить межстрочное расстояние для этого абзаца, сделав его более читаемым. Текст должен занимать несколько строк, чтобы эффект был заметен.</p>
Найдите селектор `p` в CSS. Добавьте свойство `line-height` и установите его значение равным `1.5`. Использование числовых значений без единиц измерения является рекомендуемой практикой для `line-height`, так как оно обеспечивает хорошее масштабирование при наследовании.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Использование значения `normal`

Сбросьте межстрочный интервал для элемента `span` внутри абзаца к значению по умолчанию, используя ключевое слово `normal`. Родительский абзац имеет увеличенный интервал.

CSS
.parent-paragraph {
  font-size: 16px;
  line-height: 2; /* Увеличенный интервал */
  border: 1px solid #ccc;
  padding: 10px;
}

.special-span {
  font-weight: bold;
  background-color: #eee;
  /* Установите стандартный межстрочный интервал */
  line-height: input1;
}
HTML
<p class="parent-paragraph">
  Этот абзац имеет увеличенный межстрочный интервал.
  <span class="special-span">А эта часть текста внутри span должна иметь стандартный интервал.</span>
  Продолжение текста абзаца с увеличенным интервалом.
</p>
Найдите селектор `.special-span` в CSS. Добавьте свойство `line-height` и установите его значение равным `normal`. Значение `normal` зависит от браузера и обычно составляет около 1.2.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Установка интервала в процентах

Задайте межстрочный интервал для списка `ul`, используя процентное значение. Установите интервал, равный 180% от размера шрифта элемента.

CSS
ul {
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 15px;
  padding-left: 30px;
  /* Установите межстрочный интервал 180% */
  line-height: input1;
}
HTML
<ul>
  <li>Первый пункт списка.</li>
  <li>Второй пункт списка с немного большим текстом для наглядности.</li>
  <li>Третий пункт списка.</li>
</ul>
Найдите селектор `ul` в CSS. Добавьте свойство `line-height` и установите его значение в процентах, например, `180%`. Процентное значение вычисляется относительно размера шрифта самого элемента.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Определение свойства для межстрочного интервала

Вам дан CSS-код с пропущенным названием свойства, отвечающего за межстрочный интервал. Впишите правильное название свойства, чтобы установить интервал для заголовка `h2` равным 1.4.

CSS
h2 {
  font-size: 24px;
  color: #333;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
  /* Впишите свойство для установки межстрочного интервала 1.4 */
  input1: 1.4;
}
HTML
<h2>Пример заголовка H2</h2>
Свойство CSS, которое управляет высотой строки (межстрочным интервалом), называется `line-height`. Впишите это название свойства в пропуск `input1`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Глобальная установка интервала для `body`

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

CSS
body {
  font-family: sans-serif;
  font-size: 16px;
  /* Установите базовый межстрочный интервал 1.6 */
  input1: input2;
}

h1 {
  /* Для заголовка можно задать свой интервал, но здесь он наследуется */
  font-size: 28px;
}

p {
  margin-bottom: 10px;
}
HTML
<body>
  <h1>Заголовок страницы</h1>
  <p>Это первый абзац текста. Он наследует межстрочный интервал от body.</p>
  <div>
    <p>Это абзац внутри div. Он также наследует интервал.</p>
  </div>
</body>
Найдите селектор `body` в CSS. Добавьте свойство `line-height` со значением `1.6`. Это хороший способ задать базовый интервал, который будет наследоваться большинством элементов на странице.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Вертикальное центрирование текста

Используйте свойство `line-height`, чтобы вертикально отцентрировать одну строку текста внутри блока с фиксированной высотой. Высота блока равна 50px.

CSS
.button {
  height: 50px;
  width: 200px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  font-size: 16px;
  border: 1px solid #3a8e40;
  /* Установите свойство line-height для вертикального центрирования */
  input1: 50px;
}
HTML
<div class="button">Центрированный текст</div>
Чтобы отцентрировать одну строку текста по вертикали внутри блока, установите значение `line-height` равным высоте этого блока. В данном случае, найдите селектор `.button` и добавьте свойство `line-height` со значением `50px`. Обратите внимание, что в этом задании нужно вписать только название свойства.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Разные интервалы для заголовка и абзаца

Задайте разные межстрочные интервалы для заголовка `h3` и абзаца `p`. Для заголовка установите интервал `1.3` (без единиц), а для абзаца - `normal`.

CSS
article {
  border: 1px solid #ccc;
  padding: 15px;
  font-size: 16px;
}

h3 {
  font-size: 20px;
  margin-bottom: 5px;
  /* Установите интервал 1.3 для заголовка */
  line-height: input1;
}

p {
  /* Установите интервал normal для абзаца */
  line-height: input2;
}
HTML
<article>
  <h3>Заголовок статьи</h3>
  <p>Это текст статьи, который должен иметь стандартный межстрочный интервал, в отличие от заголовка, у которого он будет немного плотнее. Текст занимает несколько строк.</p>
</article>
Найдите селектор `h3` и добавьте свойство `line-height` со значением `1.3`. Затем найдите селектор `p` и добавьте свойство `line-height` со значением `normal`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру