Tidadigi Logo

Tailwind CSS Space Between

Class này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả thuộc tính được trình bày dưới dạng class. Nó là một lựa chọn thay thế cho thuộc tính CSS Space Between. Class này dùng để kiểm soát khoảng cách giữa các phần tử con.

Các class Space Between:

  • space-y-0
  • space-y-reverse
  • -space-y-0
  • space-x-0
  • space-x-reverse
  • -space-x-0

Lưu ý: Bạn có thể thay đổi số "0" bằng các giá trị "rem" hợp lệ.

space-y-0: Class này được sử dụng để tạo khoảng cách trên trục y.

Cú pháp:

<element class="space-y-0">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Space Between Class</b> 
    <div class="mx-4 space-y-4">
        <div class="bg-green-400 h-16 rounded-lg 
                    border-2 border-green-800">1</div>
        <div class="bg-green-400 h-16 rounded-lg 
                    border-2 border-green-800">2</div>
        <div class="bg-green-400 h-16 rounded-lg 
                    border-2 border-green-800">3</div>
        <div class="bg-green-400 h-16 rounded-lg 
                    border-2 border-green-800">4</div>
    </div>
</body> 

</html>

Kết quả:

tailwind-css-space-between

space-y-reverse: Class này dùng để đảo ngược khoảng cách trên trục y. Bạn cần sử dụng class flex-reverse trước đó.

Cú pháp:

<element class="space-y-reverse">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Space Between Class</b> 
    <div class="mx-4 flex flex-col-reverse space-y-4 
                space-y-reverse">
        <div class="bg-green-400 h-16 rounded-lg">1</div>
        <div class="bg-green-400 h-16 rounded-lg">2</div>
        <div class="bg-green-400 h-16 rounded-lg">3</div>
        <div class="bg-green-400 h-16 rounded-lg">4</div>
    </div>
</body> 

</html>

Kết quả:

tailwind-css-space-between

-space-y-0: Class này được sử dụng cho khoảng cách âm trên trục y. Khi dùng class này, ta có thể đặt một phần tử vào bên trong phần tử khác.

Cú pháp:

<element class="-space-y-0">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Space Between Class</b> 
    <div class="mx-4 -space-y-4">
        <div class="bg-green-400 h-16 rounded-lg 
                    border-2 border-green-800">1</div>
        <div class="bg-green-400 h-16 rounded-lg 
                    border-2 border-green-800">2</div>
        <div class="bg-green-400 h-16 rounded-lg 
                    border-2 border-green-800">3</div>
        <div class="bg-green-400 h-16 rounded-lg 
                    border-2 border-green-800">4</div>
    </div>
</body> 

</html>

Kết quả:

tailwind-css-space-between

space-x-0: Class này được sử dụng để tạo khoảng cách trên trục x.

Cú pháp:

<element class="space-x-0">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Space Between Class</b> 
    <div class="ml-48 flex space-x-4">
        <div class="bg-green-400 w-20 h-16 rounded-lg">1</div>
        <div class="bg-green-400 w-20 h-16 rounded-lg">2</div>
        <div class="bg-green-400 w-20 h-16 rounded-lg">3</div>
        <div class="bg-green-400 w-20 h-16 rounded-lg">4</div>
    </div>
</body> 

</html>

Kết quả:

tailwind-css-space-between

space-x-reverse: Class này dùng để đảo ngược khoảng cách trên trục x. Bạn cần sử dụng class flex-reverse trước đó.

Cú pháp:

<element class="space-x-reverse">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Space Between Class</b> 
    <div class="ml-48 flex flex-row-reverse space-x-4 
                space-x-reverse">
        <div class="bg-green-400 w-20 h-16 rounded-lg">1</div>
        <div class="bg-green-400 w-20 h-16 rounded-lg">2</div>
        <div class="bg-green-400 w-20 h-16 rounded-lg">3</div>
        <div class="bg-green-400 w-20 h-16 rounded-lg">4</div>
    </div>
</body> 

</html>

Kết quả:

tailwind-css-space-between

-space-x-0: Class này dùng cho khoảng cách âm trên trục x. Khi dùng class này, bạn có thể đặt một phần tử vào bên trong phần tử khác.

Cú pháp:

<element class="-space-x-0">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Space Between Class</b> 
    <div class="ml-48 flex -space-x-4">
        <div class="bg-green-400 w-20 h-16 rounded-lg 
                    border-2 border-green-800">1</div>
        <div class="bg-green-400 w-20 h-16 rounded-lg 
                    border-2 border-green-800">2</div>
        <div class="bg-green-400 w-20 h-16 rounded-lg 
                    border-2 border-green-800">3</div>
        <div class="bg-green-400 w-20 h-16 rounded-lg 
                    border-2 border-green-800">4</div>
    </div>
</body> 

</html>

Kết quả:

tailwind-css-space-between
Last Updated : 20/07/2025