Tidadigi Logo

Tailwind CSS Margin

Lớp này chấp nhận nhiều giá trị trong tailwind CSS, bao gồm tất cả thuộc tính. Nó là một giải pháp thay thế cho CSS Margin Property. Lớp này được dùng để tạo khoảng trắng xung quanh phần tử, bên ngoài đường viền xác định. Chúng ta có thể đặt các margin khác nhau cho từng cạnh(trên, phải, dưới, trái). Bạn cần thêm thuộc tính border để sử dụng các lớp margin. Có rất nhiều thuộc tính CSS được dùng cho margin như CSS padding-top, CSS padding-bottom, CSS padding-right, CSS padding-left, v.v.

Các lớp Margin:

  • m-0: Lớp này dùng để xác định margin trên tất cả các cạnh.
  • -m-0: Lớp này dùng để xác định margin âm trên tất cả các cạnh.
  • my-0: Lớp này dùng để xác định margin trên trục y, tức là margin-top và margin-bottom.
  • -my-0: Lớp này dùng để xác định margin âm trên trục y, tức là margin-top và margin-bottom.
  • mx-0: Lớp này dùng để xác định margin trên trục x, tức là margin-left và margin-right.
  • -mx-0: Lớp này dùng để thêm một margin âm ở bên phải.
  • mt-0: Lớp này được dùng đặc biệt để thêm margin ở trên cùng.
  • -mt-0: Lớp này được dùng đặc biệt để thêm margin âm ở trên cùng.
  • mr-0: Lớp này được dùng đặc biệt để thêm margin ở bên phải.
  • -mr-0: Lớp này được dùng đặc biệt để thêm margin âm ở bên phải.
  • mb-0: Lớp này được dùng đặc biệt để thêm margin ở dưới cùng.
  • -mb-0: Lớp này được dùng đặc biệt để thêm margin âm ở dưới cùng.
  • ml-0: Lớp này được dùng đặc biệt để thêm margin ở bên trái.
  • -ml-0: Lớp này được dùng đặc biệt để thêm margin âm ở bên trái.

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

m-0: Lớp này dùng để xác định margin trên tất cả các cạnh.

Cú pháp:

<element class="m-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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="m-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
        </div>
    </div>
    </div>
</body> 

</html>

Đầu ra:

tailwind-css-margin

-m-0: Lớp này dùng để xác định margin âm trên tất cả các cạnh.

Cú pháp:

<element class="-m-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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="-m-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
        </div>
    </div>
    </div>
</body> 

</html>

Đầu ra:

tailwind-css-margin

my-0: Lớp này dùng để xác định margin trên trục y, tức là margin-top và margin-bottom.

Cú pháp:

<element class="my-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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="my-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
        </div>
    </div>
    </div>
</body> 

</html>

Đầu ra:

tailwind-css-margin

-my-0: Lớp này dùng để xác định margin âm trên trục y, tức là margin-top và margin-bottom.

Cú pháp:

<element class="-my-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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="-my-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
        </div>
    </div>
    </div>
</body> 

</html>

Đầu ra:

tailwind-css-margin

mx-0: Lớp này dùng để xác định margin trên trục x, tức là margin-left và margin-right.

Cú pháp:

<element class="mx-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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="mx-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
        </div>
    </div>
    </div>
</body> 

</html>

Đầu ra:

tailwind-css-margin

-mx-0: Lớp này dùng để xác định margin âm trên trục x, tức là margin-left và margin-right.

Cú pháp:

<element class="-mx-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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="-mx-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
        </div>
    </div>
    </div>
</body> 

</html>

Đầu ra:

tailwind-css-margin

mt-0: Lớp này được dùng đặc biệt để thêm margin ở phía trên.

Cú pháp:

<element class="mt-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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="mt-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
            
        </div>
    </div>
    </div>
</body> 

</html>

Đầu ra:

tailwind-css-margin

-mt-0: Lớp này được dùng đặc biệt để thêm margin âm ở trên cùng.

Cú pháp:

<element class="-mt-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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="-mt-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
            
        </div>
    </div>
    </div>
</body> 

</html>

Đầu ra:

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