Логические свойства отступов, границ и полей

Модуль описывает сопоставления каждого логического значения с его физическим аналогом. В таблице ниже показаны эти значения, когда writing-mode равняется horizontal-tb — с направлением слева направо. Следовательно, направление по строке выполняется горизонтально — слева направо — и margin-inline-start эквивалентно margin-left.

Если вы использовали horizontal-tb режим записи с направлением текста справа налево, тогда margin-inline-start будет тем же, что и margin-right, а в вертикальном режиме записи оно будет тем же, что и использование margin-top.

Также есть некоторые дополнительные сокращённые формы, которые стали возможны благодаря тому, что мы можем одновременно влиять на блок или обе внутренние грани рамки. У этих сокращённых форм нет физического эквивалента.

Сопоставленные свойства отступов margin-inline-start, margin-inline-end, margin-block-start и margin-inline-end можно использовать вместо их физических аналогов.

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

Одна рамка использует физические свойства, а другая — логические. Попробуйте изменить свойство direction на rtl, чтобы рамки отображались в режиме справа налево; отступы первой рамки останутся на месте, а отступы по строке во второй рамке поменяются.

Также попробуйте изменить writing-mode с horizontal-tb на vertical-rl. Обратите внимание, как отступы первой рамки остаются на месте, а во второй рамке они меняются в зависимости от направления текста.

<div class="container">
  <div class="inner">
    <div class="physical box">
      margin-top: 5px<br />
      margin-right: 0<br />
      margin-bottom: 2em<br />
      margin-left: 50px
    </div>
  </div>
  <div class="inner">
    <div class="logical box">
      margin-block-start: 5px<br />
      margin-inline-end: 0<br />
      margin-block-end: 2em<br />
      margin-inline-start: 50px
    </div>
  </div>
</div>

.box {
  writing-mode: horizontal-tb;
  direction: ltr;
}

.physical {
  margin-top: 5px;
  margin-right: 0;
  margin-bottom: 2em;
  margin-left: 50px;
}

.logical {
  margin-block-start: 5px;
  margin-inline-end: 0;
  margin-block-end: 2em;
  margin-inline-start: 50px;
}

Доступны сокращения для изменения обеих внутренних или обеих граничных сторон соответственно, margin-inline и margin-block. Каждое принимает два значения. Первое значение применяется к началу этого измерения, второе — к концу. Если задано только одно значение, оно применяется к обоим.

В горизонтальном режиме записи этот CSS применит 5px отступ к верхней части рамки и 10px отступ к нижней.

.box {
  margin-block: 5px 10px;
}

Отображаемые свойства отступов padding-inline-start, padding-inline-end, padding-block-start и padding-inline-end можно использовать вместо их физических аналогов.

В этом примере две области. Одна имеет заданные физические свойства отступов, а другая использует логические свойства отступов. При writing-mode horizontal-tb обе области должны отображаться одинаково.

Попробуйте изменить свойство direction на rtl, чтобы области отображались справа налево. Отступы первой области останутся на тех же местах, а отступы второй области по inline-размеру изменятся.

Вы также можете изменить writing-mode с horizontal-tb на vertical-rl. Обратите внимание, как отступы первой области остаются на тех же местах, а отступы второй области меняются в соответствии с направлением текста.

<div class="container">
  <div class="physical box">
    padding-top: 5px<br />
    padding-right: 0<br />
    padding-bottom: 2em<br />
    padding-left: 50px
  </div>

  <div class="logical box">
    padding-block-start: 5px<br />
    padding-inline-end: 0<br />
    padding-block-end: 2em<br />
    padding-inline-start: 50px
  </div>
</div>

.box {
  writing-mode: horizontal-tb;
  direction: ltr;
}

.physical {
  padding-top: 5px;
  padding-right: 0;
  padding-bottom: 2em;
  padding-left: 50px;
}

.logical {
  padding-block-start: 5px;
  padding-inline-end: 0;
  padding-block-end: 2em;
  padding-inline-start: 50px;
}

Как и с отступами, существуют сокращённые записи для отступов — padding-inline и padding-block — которые позволяют задать отступы для двух inline- и двух block-измерений соответственно.

В горизонтальном writing-mode, этот CSS применит 5px отступа к верхней части области и 10px отступа к нижней части:

.box {
  padding-block: 5px 10px;
}

Свойства границ — основная причина, почему в этом модуле так много свойств, так как он предоставляет логические свойства цвета, ширины и стиля границы для каждой стороны области, а также сокращённые записи для задания всех трёх значений для каждой стороны. Как и с отступами и полями, существует отображаемая версия каждого физического свойства.

Демо ниже использует некоторые подробные значения и три сокращённых значения. Как и в других демо, попробуйте изменить свойство direction на rtl, чтобы области отображались справа налево, или изменить writing-mode с horizontal-tb на vertical-rl.

<div class="container">
  <div class="physical box">Borders using physical properties.</div>
  <div class="logical box">Borders using logical properties.</div>
</div>

.box {
  writing-mode: horizontal-tb;
  direction: ltr;
}

.physical {
  border-top: 2px solid hotpink;
  border-right-style: dotted;
  border-right-color: goldenrod;
  border-right-width: 5px;
  border-bottom: 4px double black;
  border-left: none;
}

.logical {
  border-block-start: 2px solid hotpink;
  border-inline-end-style: dotted;
  border-inline-end-color: goldenrod;
  border-inline-end-width: 5px;
  border-block-end: 4px double black;
  border-inline-start: none;
}

Существуют сокращённые записи для задания ширины, стиля и цвета блока или inline-размера, а также сокращённые записи для задания всех трёх значений в блоке или inline-размере. Нижеприведённый код в режиме горизонтального написания задаст 2px green solid границу для верхней и нижней части области и 4px dotted purple границу для левой и правой части.

.box {
  border-block: 2px solid green;
  border-inline-width: 4px;
  border-inline-style: dotted;
  border-inline-color: rebeccapurple;
}

В модуле есть эквиваленты, относительные к направлению текста, для подробных свойств border-radius. В примере ниже, в горизонтальном writing-mode, будет задан радиус скругления верхней правой границы 1em, нижней правой 0, нижней левой 20px и верхней левой 40px.

.box {
  border-end-start-radius: 1em;
  border-end-end-radius: 0;
  border-start-end-radius: 20px;
  border-start-start-radius: 40px;
}

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

Использование любой сокращённой записи из четырёх значений, такой как margin, padding, или border, в настоящее время будет использовать физические версии, поэтому, если важно следовать направлению документа, используйте подробные свойства.