box-sizing

예제

테두리와 패딩 포함하기

box-border 유틸리티를 사용하면 엘리먼트의 box-sizing을 border-box로 설정할 수 있습니다. 이렇게 하면 브라우저가 엘리먼트의 높이나 너비를 지정할 때 테두리와 패딩을 포함합니다.

즉, 2px 테두리와 모든 면에 4px 패딩이 있는 100px × 100px 엘리먼트는 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>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.