Tailwind CSS - 盒子大小

Tailwind CSS 盒子大小是一個實用程式類，用於定義元素的寬度和高度是如何計算為元素的總大小的。它指定元素的內填充和邊框是如何包含在其寬度和高度中的。

Tailwind CSS 盒子大小類

以下是Tailwind CSS 盒子大小類列表，有效地顯示了元素的寬度和高度是如何計算的，包括內填充和邊框。

類	CSS 屬性
box-border	box-sizing: border-box;
box-content	box-sizing: content-box;

Tailwind CSS 盒子大小類的功能

box-border: 此類替換 CSS box-sizing: border-box; 屬性。將元素的實用程式設定為 box-border，這意味著元素的寬度和高度包含其內填充和邊框。
box-content: 此類替換 CSS box-sizing: content-box; 屬性。將元素的實用程式設定為 box-content，這意味著元素的寬度和高度不包含其內填充和邊框。

Tailwind CSS 盒子大小類示例

下面的示例將說明 Tailwind CSS 盒子大小類。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h2 class="text-3xl 
            mb-3">
        Tailwind CSS Box Sizing Classes
    </h2>
    <div class="flex">
        <div class="box-border 
                    w-32 h-32 
                    p-4 border-4 
                    bg-blue-500 
                    mr-3">
            Box Border
        </div>
        <div class="box-content 
                    w-32 h-32 
                    p-4 border-4 
                    bg-red-500">
            Box Content
        </div>
    </div>
</body>
</html>

列印頁面