Метод расчёта размера элемента

Классы box-border и box-content задают свойство box-sizing: считаются ли рамка и внутренние отступы частью заданных ширины и высоты или добавляются к ним. Берите их, когда размер элемента должен описывать только область содержимого или когда нужно вернуть обычный для фреймворка расчёт.

Пример

Обоим образцам заданы одинаковые ширина, высота, внутренний отступ и рамка. Пунктир показывает заданный размер. Подпись над образцом — класс, который на нём стоит.

<div class="grid grid-col-1 sm:grid-col-2 gap-4 items-cross-start color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">box-border</code>
    <div class="w-f2 h-e6 outline-2 outline-dashed outline-outline">
      <div class="box-border w-f2 h-e6 p-3 border-8 border-primary bg-primary-container color-on-primary-container">Рамка и отступы внутри заданного размера</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 p-bottom-d2">
    <code class="text-1/2 color-on-surface-variant">box-content</code>
    <div class="w-f2 h-e6 outline-2 outline-dashed outline-outline">
      <div class="box-content w-f2 h-e6 p-3 border-8 border-tertiary bg-tertiary-container color-on-tertiary-container">Рамка и отступы добавлены к заданному размеру</div>
    </div>
  </div>
</div>

Классы

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Расчёт по умолчанию

Базовые стили фреймворка задают box-sizing: border-box всем элементам и псевдоэлементам ::before и ::after. Заданная ширина или высота уже включает рамку и внутренние отступы, поэтому box-border нужен только там, где стиль выше по каскаду изменил расчёт, — например, внутри стороннего виджета.

Размер области содержимого

box-content относит ширину и высоту только к содержимому: рамка и внутренние отступы прибавляются снаружи, и элемент становится больше заданного размера. Это удобно, когда точный размер нужен содержимому — например, холсту или изображению внутри рамки.

<div class="box-content w-f2 h-e6 p-3 border-8 border-primary">
  Содержимое занимает ровно w-f2 × h-e6
</div>

Ограничения

• У семейства нет префиксов ширины экрана и состояния: класс действует на всех экранах.
• box-content на элементе с w-full делает его шире родителя на рамку и внутренние отступы.

См. также

• Ширина
• Высота
• Внутренний отступ