Lớp này chấp nhận nhiều giá trị trong tailwind CSS, trong đó tất cả thuộc tính được bao phủ dưới dạng class. Nó là một giải pháp thay thế cho CSS height Property. Class này được dùng để đặt chiều cao của một phần tử. Class height không chứa padding, margin và border của các phần tử.
Height classes:
- h-0: Class này đặt height thành không.
- h-auto: Class này đặt height theo nội dung.
- h-px: Class này được dùng để đặt height thành 1px cố định.
- h-1/2: Class này đặt height bằng một nửa chiều cao cửa sổ.
- h-1/3: Class này đặt height bằng một phần ba chiều cao cửa sổ.
- h-1/4: Class này đặt height bằng một phần tư chiều cao cửa sổ.
- h-1/5: Class này đặt height bằng một phần năm chiều cao cửa sổ.
- h-1/6: Class này đặt chiều cao bằng một phần sáu chiều cao cửa sổ.
- h-full: Class này đặt chiều cao của một phần tử thành 100% so với phần tử cha. Điều kiện là phần tử cha phải có chiều cao xác định.
- h-screen: Class này được dùng để làm cho một phần tử trải dài toàn bộ chiều cao của viewport.
Note: Bạn có thể thay đổi số với các giá trị "rem" hợp lệ hoặc đặt giá trị phần trăm.
h-0: Class này được dùng để đặt chiều cao cụ thể cho bất kỳ phần tử nào. Bạn có thể thay đổi số bằng một số đơn vị rem hợp lệ. Mục đích là cố định chiều cao của phần tử.
Syntax:
<element class="h-0">...</element>
Example:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Height Class</b>
<div class="flex flex-wrap-reverse p-4 mx-12
space-x-4 h-64 bg-green-200">
<div class="h-8 w-12 bg-green-400
rounded-lg">h-8</div>
<div class="h-12 w-12 bg-green-400
rounded-lg">h-12</div>
<div class="h-16 w-12 bg-green-400
rounded-lg">h-16</div>
<div class="h-20 w-12 bg-green-400
rounded-lg">h-20</div>
<div class="h-24 w-12 bg-green-400
rounded-lg">h-24</div>
<div class="h-32 w-12 bg-green-400
rounded-lg">h-32</div>
<div class="h-40 w-12 bg-green-400
rounded-lg">h-40</div>
<div class="h-48 w-12 bg-green-400
rounded-lg">h-48</div>
<div class="h-52 w-12 bg-green-400
rounded-lg">h-52</div>
</div>
</body>
</html>
Output:
h-auto: Class này được dùng để trình duyệt xác định chiều cao của phần tử.
Syntax:
<element class="h-auto">...</element>
Example:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Height Class</b>
<div class="mx-48 bg-green-200 p-8">
<div class="h-auto bg-green-400
rounded-lg">h-auto</div>
</div>
</body>
</html>
Output:
h-screen: Class này được dùng để làm cho một phần tử trải dài toàn bộ chiều cao của viewport.
Syntax:
<element class="h-screen">...</element>
Example:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Height Class</b>
<div class="mx-48 bg-green-200 p-8">
<div class="h-screen bg-green-400
rounded-lg">h-screen</div>
</div>
</body>
</html>
Output:
h-full: Class này được dùng để đặt chiều cao của một phần tử thành 100% so với phần tử cha. Điều kiện là phần tử cha phải có chiều cao xác định.
Syntax:
<element class="h-full">...</element>
Example:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Height Class</b>
<div class="mx-48 h-48 bg-green-200 p-8">
<div class="h-full bg-green-400
rounded-lg">h-full</div>
</div>
</body>
</html>
Output:
