Tidadigi Logo

Tailwind CSS Gap

Lớp này chấp nhận nhiều giá trị trong Tailwind CSS, tất cả thuộc tính đều được bao phủ dưới dạng class. Nó là một lựa chọn thay thế cho CSS gap property.

Class này được dùng để thiết lập khoảng cách giữa các hàng và cột. Nó còn được gọi là gutter. Tương tự như column-gap và row-gap, bạn có thể sử dụng gap property.

Gap: Có tổng cộng 105 class cho gap, bao gồm cả trục x và y riêng biệt.

  • gap-0
  • gap-x-0
  • gap-y-0
  • gap-0.5
  • gap-x-0.5
  • gap-y-0.5
  • gap-1
  • gap-x-1
  • gap-y-1
  • gap-1.5
  • gap-x-1.5
  • gap-y-1.5
  • gap-2
  • gap-x-2
  • gap-y-2
  • gap-2.5
  • gap-x-2.5
  • gap-y-2.5
  • gap-3
  • gap-x-3  
  • gap-y-3  
  • gap-3.5  
  • gap-x-3.5
  • gap-y-3.5
  • gap-4  
  • gap-x-4
  • gap-y-4
  • gap-5
  • gap-x-5
  • gap-y-5
  • gap-6  
  • gap-x-6
  • gap-y-6
  • gap-7
  • gap-x-7
  • gap-y-7
  • gap-8  
  • gap-x-8
  • gap-y-8  
  • gap-9  
  • gap-x-9
  • gap-y-9  
  • gap-10  
  • gap-x-10  
  • gap-y-10  
  • gap-11
  • gap-x-11  
  • gap-y-11  
  • gap-12  
  • gap-x-12  
  • gap-y-12  
  • gap-14  
  • gap-x-14  
  • gap-y-14  
  • gap-16  
  • gap-x-16  
  • gap-y-16  
  • gap-20  
  • gap-x-20  
  • gap-y-20  
  • gap-24  
  • gap-x-24  
  • gap-y-24  
  • gap-28  
  • gap-x-28  
  • gap-y-28  
  • gap-32  
  • gap-x-32  
  • gap-y-32  
  • gap-36  
  • gap-x-36  
  • gap-y-36  
  • gap-40  
  • gap-x-40  
  • gap-y-40  
  • gap-44  
  • gap-x-44
  • gap-y-44
  • gap-48  
  • gap-x-48  
  • gap-y-48  
  • gap-52  
  • gap-x-52
  • gap-y-52
  • gap-56  
  • gap-x-56
  • gap-y-56
  • gap-60  
  • gap-x-60
  • gap-y-60
  • gap-64  
  • gap-x-64
  • gap-y-64
  • gap-72  
  • gap-x-72
  • gap-y-72
  • gap-80  
  • gap-x-80
  • gap-y-80
  • gap-96  
  • gap-x-96
  • gap-y-96
  • gap-px  
  • gap-x-px
  • gap-y-px

gap-number: Chỉ sử dụng class gap mà không chỉ định trục sẽ giữ cả hai trục. Giá trị sẽ theo số đã chỉ định.

Syntax:

<element class="gap-number"> Contents... </element>

Parameter: Class này chấp nhận một giá trị duy nhất như đã đề cập ở trên và mô tả dưới đây:

  • number: Chứa kích thước gap của phần tử.

Example:

HTML 
<!DOCTYPE html> 
<html>

<head> 
    <title>Tailwind gap Class</title> 
    <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 gap Class</b> 

    <div id="main" class="grid grid-rows-2
                          grid-flow-col gap-5"> 
        <div class="bg-green-500 rounded-lg m-4 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">6</div> 
    </div> 
</body> 

</html>

Output:

tailwind-css-gap

gap-x-number: Sử dụng class gap-x sẽ giữ khoảng cách trên trục x theo số đã chỉ định.

Syntax:

<element class="gap-x-number"> Contents... </element>

Example:

HTML 
<!DOCTYPE html> 
<html>

<head> 
    <title>Tailwind gap-x-number Class</title> 
    <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 gap-x-number Class</b> 

    <div id="main" class="grid grid-rows-2
                          grid-flow-col gap-x-5"> 
        <div class="bg-green-500 rounded-lg m-4 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">6</div> 
    </div> 
</body> 

</html>

Output:

tailwind-css-gap

gap-y-number: Sử dụng class gap-y sẽ giữ khoảng cách trên trục y theo số đã chỉ định.

Syntax:

<element class="gap-y-number"> Contents... </element>

Example:

HTML 
<!DOCTYPE html> 
<html>

<head> 
    <title>Tailwind gap-y-number Class</title> 
    <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 gap-y-number Class</b> 

    <div id="main" class="grid grid-rows-2
                          grid-flow-col gap-y-5"> 
        <div class="bg-green-500 rounded-lg m-4 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">6</div> 
    </div> 
</body> 

</html>

Output:

tailwind-css-gap
Last Updated : 20/07/2025