box-sizing

Ví dụ

Bao gồm border và padding

Sử dụng tiện ích box-border để đặt box-sizing của phần tử thành border-box, yêu cầu trình duyệt bao gồm border và padding của phần tử khi bạn đặt chiều cao hoặc chiều rộng.

Điều này có nghĩa là một phần tử 100px × 100px với border 2px và padding 4px ở tất cả các cạnh sẽ được hiển thị là 100px × 100px, với vùng nội dung bên trong là 88px × 88px:

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

Tailwind đặt đây làm mặc định cho tất cả các phần tử trong preflight base styles của chúng tôi.

Loại trừ border và padding

Sử dụng tiện ích box-content để đặt box-sizing của phần tử thành content-box, yêu cầu trình duyệt thêm border và padding vào chiều rộng hoặc chiều cao đã chỉ định của phần tử.

Điều này có nghĩa là một phần tử 100px × 100px với border 2px và padding 4px ở tất cả các cạnh sẽ thực sự được hiển thị là 112px × 112px, với vùng nội dung bên trong là 100px × 100px:

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

Responsive design

Prefix a box-sizing utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.