box-sizing

Примеры

Включая границы и отступы

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

Это означает, что элемент размером 100px × 100px с границей 2px и отступами 4px со всех сторон будет отображаться как 100px × 100px, с внутренней областью содержимого 88px × 88px:

<div class="box-border size-32 border-4 p-4 ...">  <!-- ... --></div>

Tailwind делает это поведением по умолчанию для всех элементов в наших базовых стилях preflight.

Исключая границы и отступы

Используйте утилиту box-content для установки box-sizing элемента в значение content-box, указывая браузеру добавлять границы и отступы поверх указанной ширины или высоты элемента.

Это означает, что элемент размером 100px × 100px с границей 2px и отступами 4px со всех сторон будет фактически отображаться как 112px × 112px, с внутренней областью содержимого 100px × 100px:

<div class="box-content size-32 border-4 p-4 ...">  <!-- ... --></div>

Адаптивный дизайн

Префикс a box-sizing утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

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

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