V-Line

V-Line — это визуальное представление вертикальной линии в блоках, часто используемое для отделения элементов или создания структурного дизайна.

Создание вертикальной линии

Обычно используется свойство border-left или border-right:

div.vline {
  border-left: 2px solid #333;
  height: 100px;
  margin: 0 10px;
}

Использование с flexbox

Вертикальная линия часто располагается между элементами с помощью display: flex;:

div.container {
  display: flex;
  align-items: center;
}

div.box {
  padding: 20px;
  background: lightgray;
}

Внутри контейнера можно разместить два блока div.box с div.vline между ними.

Особенности

  • Высота линии можно задавать явно или через height: 100% для растягивания по контейнеру.
  • Цвет и ширина линии легко изменяются через свойства border.
  • Подходит для создания визуальных разделителей в макете.