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

box
sm
md
lg
xl

Классы

Класс Значение
box-border box-sizing: border-box;
box-content box-sizing: content-box;

Описание

Модификатор управляет методом расчета размера элемента.

Использование: {условие действия}:{модификатор}

  • Условие действия. Необязательный параметр. Определяет условие действия модификатора. Может принимать значения:
    • sm — для экранов small и больше.
    • md — для экранов medium и больше.
    • lg — для экранов large и больше.
    • xl — для экранов extra large и больше.
  • Модификатор. Обязательный параметр.
    • box-border — не учитываются границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента.
    • box-content — учитываются любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента.

box-border

С помощью модификатора box-border учитываются любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента.

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

Данная настройка используется по умолчанию.

<div class="box-border h-d9 w-d9 p-4 border-4 border-blue bg-white radius-3">
    <div class="h-full w-full bg-info bg-stripes bg-stripes-blue radius-2"></div>
</div>

box-content

С помощью модификатора box-content устанавливается стандартное поведение свойства box-sizing.

Если вы выставите элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.

<div class="box-content h-d9 w-d9 p-4 border-4 border-blue bg-white radius-3">
    <div class="h-full w-full bg-info bg-stripes bg-stripes-blue radius-2"></div>
</div>

Адаптивность

Для управления методом расчета размера элемента, начиная с определенного размера области просмотра, добавьте префикс контрольной точки ( sm, md, lg, xl ) через двоеточие (:) к модификатору.

Например, воспользуйтесь модификатором md:box-border для того чтобы не учитывались границы и внутренние отступы в размере элемента для экранов размером Medium и больше.

<div class="md:box-border"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью