Логические свойства (logical properties): Тренажер CSS

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

Эта серия заданий посвящена логическим свойствам CSS (CSS Logical Properties). В отличие от физических свойств (таких как `margin-left`, `padding-top`, `width`), которые привязаны к физическим направлениям экрана (лево, право, верх, низ), логические свойства зависят от направления текста и режима письма (`writing-mode`, `direction`). Это делает макеты более гибкими и адаптируемыми к разным языкам и системам письма (например, для языков с письмом справа налево или сверху вниз). В этих заданиях вы потренируетесь заменять физические свойства на их логические эквиваленты для управления отступами, полями, границами и размерами элементов.

Список тем

Логический отступ слева

Задайте элементу внешний отступ с начальной (в LTR - левой) стороны, используя логическое свойство. Элемент должен получить отступ слева, не привязываясь к физическому направлению.

CSS

.box {
  background-color: #4CAF50;
  width: 100px;
  height: 100px;
   
  input1: 20px;
}

                     .box {
  background-color: #4CAF50;
  width: 100px;
  height: 100px;
   
  input1: 20px;
}

HTML

<div class="box"></div>

Вместо физического свойства `margin-left`, используйте его логический аналог, который отвечает за отступ в начале строки текста. В стандартном горизонтальном письме слева направо (LTR) это будет левый отступ. Используйте свойство `margin-inline-start`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Логический внутренний отступ снизу

Добавьте тексту внутри блока внутренний отступ с конечной стороны блока (в стандартном режиме письма - снизу), используя соответствующее логическое свойство.

CSS

.content {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  width: 200px;
  /* Добавьте внутренний отступ в конце блока */
  input1: 15px;
}

                     .content {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  width: 200px;
  /* Добавьте внутренний отступ в конце блока */
  input1: 15px;
}

HTML

<div class="content">
  Это текст внутри блока.
</div>

Для добавления внутреннего отступа в конце блочного направления (обычно снизу) используется логическое свойство `padding-block-end`. Оно заменяет физическое свойство `padding-bottom`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Горизонтальные отступы: логический шорткат

Используя логическое сокращенное свойство (шорткат), установите одинаковые внешние отступы для начальной и конечной сторон элемента (слева и справа в LTR).

CSS

.item {
  background-color: #2196F3;
  height: 50px;
  width: 80%; /* Ширина относительно родителя */
  /* Установите горизонтальные отступы одним свойством */
  input1: 25px;
}

                     .item {
  background-color: #2196F3;
  height: 50px;
  width: 80%; /* Ширина относительно родителя */
  /* Установите горизонтальные отступы одним свойством */
  input1: 25px;
}

HTML

<div class="item"></div>

Вместо того чтобы писать `margin-inline-start` и `margin-inline-end` по отдельности (или `margin-left` и `margin-right`), можно использовать сокращенное свойство `margin-inline`, которое устанавливает оба горизонтальных (вдоль строки) отступа.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Вертикальные внутренние отступы: логический шорткат

Задайте одинаковые внутренние отступы для начальной и конечной сторон блока (сверху и снизу в стандартном режиме) с помощью логического сокращенного свойства.

CSS

.text-block {
  background-color: #ffeb3b;
  border: 1px dashed #ccc;
  width: 250px;
  /* Установите вертикальные внутренние отступы одним свойством */
  input1: 20px;
}

                     .text-block {
  background-color: #ffeb3b;
  border: 1px dashed #ccc;
  width: 250px;
  /* Установите вертикальные внутренние отступы одним свойством */
  input1: 20px;
}

HTML

<div class="text-block">
  Этот блок имеет вертикальные внутренние отступы.
</div>

Аналогично `margin-inline`, существует шорткат для вертикальных (вдоль блочного направления) внутренних отступов - `padding-block`. Он заменяет собой `padding-block-start` и `padding-block-end` (или `padding-top` и `padding-bottom`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Логическая граница в начале строки

Добавьте сплошную черную границу толщиной 2px к начальной стороне элемента (слева в LTR), используя логическое свойство для границы.

CSS

.card {
  background-color: #e7e7e7;
  padding: 15px;
  width: 180px;
  /* Добавьте границу слева с помощью логического свойства */
  input1: 2px solid black;
}

                     .card {
  background-color: #e7e7e7;
  padding: 15px;
  width: 180px;
  /* Добавьте границу слева с помощью логического свойства */
  input1: 2px solid black;
}

HTML

<div class="card">
  Карточка товара
</div>

Для стилизации границы на начальной стороне строки (inline start) используется свойство `border-inline-start`. Оно работает аналогично `border-left` в LTR.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Логический размер по горизонтали

Установите размер элемента вдоль строки текста (ширину в горизонтальном режиме письма), используя соответствующее логическое свойство.

CSS

.resizable {
  background-color: #8BC34A;
  height: 60px;
  /* Установите ширину с помощью логического свойства */
  input1: 200px;
}

                     .resizable {
  background-color: #8BC34A;
  height: 60px;
  /* Установите ширину с помощью логического свойства */
  input1: 200px;
}

HTML

<div class="resizable"></div>

Вместо физического свойства `width`, используйте его логический аналог `inline-size`, который определяет размер элемента в направлении строки текста.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Логический размер по вертикали

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

CSS

.resizable-v {
  background-color: #FF9800;
  width: 150px;
  /* Установите высоту с помощью логического свойства */
  input1: 100px;
}

                     .resizable-v {
  background-color: #FF9800;
  width: 150px;
  /* Установите высоту с помощью логического свойства */
  input1: 100px;
}

HTML

<div class="resizable-v"></div>

Аналогично `inline-size`, для установки размера элемента в блочном направлении (обычно по вертикали) используется логическое свойство `block-size`. Оно заменяет `height`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выравнивание текста по началу строки

Выровняйте текст внутри параграфа по началу строки, используя логическое значение свойства `text-align`. В LTR это будет выравнивание по левому краю.

CSS

p {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Выровняйте текст по началу */
  text-align: input1;
}

                     p {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Выровняйте текст по началу */
  text-align: input1;
}

HTML

<p>
  Этот текст нужно выровнять по началу строки. В русском языке это означает выравнивание по левому краю.
</p>

Свойство `text-align` принимает логические значения `start` и `end` в дополнение к физическим `left`, `right`, `center`, `justify`. Используйте значение `start` для выравнивания по началу строки.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Позиционирование с логическими отступами

Расположите абсолютно позиционированный элемент, используя логические свойства для отступов от краев содержащего блока. Задайте отступ от начала блока (сверху) и от конца строки (справа в LTR).

CSS

.container {
  position: relative;
  width: 250px;
  height: 150px;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background-color: #00BCD4;
  width: 50px;
  height: 50px;
  /* Отступ от начала блока (сверху) */
  input1: 10px;
  /* Отступ от конца строки (справа) */
  input2: 15px;
}

                     .container {
  position: relative;
  width: 250px;
  height: 150px;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background-color: #00BCD4;
  width: 50px;
  height: 50px;
  /* Отступ от начала блока (сверху) */
  input1: 10px;
  /* Отступ от конца строки (справа) */
  input2: 15px;
}

HTML

<div class="container">
  <div class="positioned"></div>
</div>

Для позиционирования с помощью логических свойств используйте `inset-block-start` (аналог `top`), `inset-block-end` (аналог `bottom`), `inset-inline-start` (аналог `left`) и `inset-inline-end` (аналог `right`). Вам нужно использовать `inset-block-start` и `inset-inline-end`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинация логических свойств

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

CSS

.combo-box {
  background-color: #fce4ec;
  width: 280px;
  /* Внутренние отступы по горизонтали */
  input1: 20px;
  /* Граница в конце блока */
  input2: 3px dashed #ad1457;
}

                     .combo-box {
  background-color: #fce4ec;
  width: 280px;
  /* Внутренние отступы по горизонтали */
  input1: 20px;
  /* Граница в конце блока */
  input2: 3px dashed #ad1457;
}

HTML

<div class="combo-box">
  Этот блок использует комбинацию логических свойств для отступов и границы.
</div>

Используйте сокращенное свойство `padding-inline` для горизонтальных внутренних отступов и `border-block-end` для границы в конце блока (аналог `border-bottom`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку