Block css: Разметка и содержащий блок — CSS

border-block ⚡️ HTML и CSS с примерами кода

Свойство border-block — это сокращенное свойство для установки значений свойств границы отдельного логического блока.

Демо

• border-block
• border-block-color
• border-block-end
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-start
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-block-style
• border-block-width
• border-inline
• border-inline-color
• border-inline-end
• border-inline-end-color
• border-inline-end-style
• border-inline-end-width
• border-inline-start
• border-inline-start-color
• border-inline-start-style
• border-inline-start-width
• border-inline-style
• border-inline-width
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius

border-block можно использовать для установки значений для одного или нескольких параметров border-block-width, border-block-style и border-block-color одновременно в начале и в конце блока. Физические границы, которым он сопоставляется, зависят от режима письма элемента, направленности и ориентации текста. Он соответствует свойствам border-top и border-bottom или border-right и border-left в зависимости от значений, определенных для writing-mode, direction и text-orientation.

Границы в другом измерении могут быть установлены с помощью border-inline, который устанавливает border-inline-start и border-inline-end.

Синтаксис

Это свойство является сокращением для следующих свойств CSS:

• border-block-color
• border-block-style
• border-block-width

border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;

Значения

border-block задается одним или несколькими из следующих элементов в любом порядке:

border-width

Ширина границы.

border-style

Стиль линии границы.

color

Цвет границы.

Определение

Поддержка браузерами

Пример

=== HTML

1
2
3
4
5

```html
<div>
  <p>Example text</p>
</div>
```

=== CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}
.exampleText {
  writing-mode: vertical-rl;
  border-block: 5px dashed blue;
}
```

=== Результат

![border-block](border-block. png)

Ссылки

• Свойство border-block ^{MDN (рус.)}
• CSS Logical Properties and Values Level 1 ^{Spec (англ.)}

border-block — CSS — Дока

1. Кратко
2. Пример
3. Как понять
4. Как пишется
5. Подсказки

Кратко

border-block — это логическое свойство-шорткат. Он создаёт у элемента рамки по блочной оси.

Блочная ось связана с направлением потока сайта. Например, для русского и английского языков border-block рисует границу сверху и снизу элемента (поток идёт сверху вниз), а для японского справа и слева (поток идёт справа налево).

Пример

div {  border-block: 5px solid white;}
           div {
  border-block: 5px solid white;
}

Как понять

С помощью border-block граница нарисуется всегда там, где нужно, вне зависимости от языка 😎

Допустим, мы хотим выделить текст сверху и снизу аккуратными границами. Попробуем сделать это с помощью свойств border-top и border-bottom:

div {  border-top: 7px dashed white;  border-bottom: 7px dashed white;}
          div {
  border-top: 7px dashed white;
  border-bottom: 7px dashed white;
}
 

А теперь текст будет на японском языке, для этого сменим поток и посмотрим, что будет:

div {  writing-mode: vertical-rl;}
          div {
  writing-mode: vertical-rl;
}

Язык другой, направление письма другое, а границы всё там же — сверху и снизу. Теперь используем правильное свойство border-block и снова понаблюдаем:

div {  writing-mode: vertical-rl;  border-block: 7px dashed white;}
          div {
  writing-mode: vertical-rl;
  border-block: 7px dashed white;
}

Сейчас всё логично: стиль письма справа налево, и граница справа и слева текста, как мы и хотели.

🧠

японское «鯖» из примеров переводится как «скумбрия».

Как пишется

border-block пишется так же, как и border, а ещё сокращает такие же свойства. Отличие лишь в том, что border в записи заменяется на border-block:

• border-block-width — ширина границы;
• border-block-style — стиль границы;
• border-block-color — цвет границы.

Можно отдельно стилизовать одну из границ по аналогии с border-top и border-bottom:

• border-block-start — первая граница по направлению блочной оси;
• border-block-end — вторая граница.

Подсказки

💡 Когда нужно, чтобы видимые границы блока разместились в противоположном блочной оси направлении, используйте свойство border-inline, — оно рисует видимые границы по направлению строчной оси.

div {  border-inline: 5px solid white;}
          div {
  border-inline: 5px solid white;
}

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

ctrl + alt + ←

→

ctrl + alt + →

CS193X: Основы веб-программирования

Обзор

Это обзор блочных и встроенных правил, которые мы изучили в Лекции 2.

Это, пожалуй, самое важное правило в CSS для понимания. Пожалуйста, убедитесь, что эта концепция кристально ясна!

• Блочные элементы
  • Высота и ширина блочных элементов
  • Поток сверху вниз
• Встроенные элементы
  • Высота и ширина встроенных элементов
  • Поток слева направо

Блочные элементы