Tidadigi Logo

Tailwind CSS Box Sizing

Thuộc tính CSS box-sizing kiểm soát cách tính toán chiều rộng và chiều cao của một phần tử, bao gồm cả padding và borders. Tailwind CSS giúp đơn giản hóa việc quản lý box-sizing để có bố cục nhất quán.

  • Sử dụng các utilities như box-border để bao gồm borders và padding trong kích thước của phần tử.
  • Sử dụng box-content để loại trừ borders và padding, chỉ tính toán kích thước nội dung.
HTML 
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="box box-border border-4 p-4 bg-blue-200">
        Box with padding and border included in size
    </div>
    <div class="box box-content border-4 p-4 bg-green-200">
        Box with size excluding padding and border
    </div>
</body>
</html>
  • box-border: Bao gồm borders và padding vào tổng chiều rộng và chiều cao của phần tử.
  • box-content: Loại trừ borders và padding, chỉ tính toán kích thước cho vùng nội dung.

Box Sizing Classes

  • box-border 
  • box-content 

Tailwind CSS box-border Class

Lớp box-border đảm bảo rằng chiều rộng và chiều cao của phần tử bao gồm nội dung, padding và borders của nó. Điều này giúp việc định kích thước các phần tử trở nên dễ dàng hơn.

Syntax:

<element class="box-border">..</element>
HTML 
<html>
<head>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center">
    <div class="box-border m-auto h-28 w-32 p-4 
                border-4 bg-green-500 m4">
        A Computer Science Portal
    </div>
</body>
</html>
  • The box-border class includes the border and padding within the element’s total width and height, simplifying layout adjustments.

Tailwind CSS box-content Class

Trong chế độ này, lớp width và height chỉ bao gồm nội dung. Border và padding không được bao gồm trong đó.Tức là nếu chúng ta đặt chiều rộng của một phần tử thành 200 pixel, vùng nội dung của phần tử sẽ rộng 200 pixel. Chiều rộng của bất kỳ border hoặc padding nào sẽ được thêm vào chiều rộng hiển thị cuối cùng.

Syntax:

<element class="box-content">..</element>

Example: 

HTML 
<html>
<head>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center">
    <div class="box-content m-auto h-28 w-32 p-4 border-4 bg-green-500">
        A Computer Science Portal
    </div>
</body>
</html>
  • Lớp box-content đảm bảo rằng chiều rộng và chiều cao được chỉ định chỉ áp dụng cho vùng nội dung.
  • Padding (p-4) và border (border-4) được thêm vào bên ngoài kích thước nội dung, làm tăng kích thước hiển thị tổng thể của phần tử.

Best Practices for Using Tailwind CSS Box Sizing

  • Understand the Defaults: Sử dụng box-border vì nó là mặc định và đơn giản hóa các tính toán bố cục bằng cách bao gồm padding và borders trong kích thước phần tử.
  • Use box-content When Needed: Chuyển sang box-content cho các trường hợp cụ thể khi chỉ kích thước nội dung là quan trọng. Ví dụ như khi thêm khoảng cách bên ngoài hộp.
  • Combine with Spacing Utilities: Tận dụng các utilities margin và padding của Tailwind để kiểm soát tốt hơn khoảng cách và bố cục.

Last Updated : 20/07/2025