margin

Ví dụ

Ví dụ cơ bản

Sử dụng các tiện ích m-<number> như m-4 và m-8 để kiểm soát margin trên tất cả các phía của một phần tử:

<div class="m-8 ...">m-8</div>

Thêm margin vào một phía

Sử dụng các tiện ích mt-<number>, mr-<number>, mb-<number>, và ml-<number> như ml-2 và mt-6 để kiểm soát margin trên một phía của một phần tử:

<div class="mt-6 ...">mt-6</div><div class="mr-4 ...">mr-4</div><div class="mb-8 ...">mb-8</div><div class="ml-2 ...">ml-2</div>

Thêm margin theo chiều ngang

Sử dụng các tiện ích mx-<number> như mx-4 và mx-8 để kiểm soát margin theo chiều ngang của một phần tử:

<div class="mx-8 ...">mx-8</div>

Thêm margin theo chiều dọc

Sử dụng các tiện ích my-<number> như my-4 và my-8 để kiểm soát margin theo chiều dọc của một phần tử:

<div class="my-8 ...">my-8</div>

Sử dụng giá trị âm

Để sử dụng giá trị margin âm, thêm tiền tố dấu gạch ngang vào tên class để chuyển đổi nó thành giá trị âm:

<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div><div class="-mt-8 bg-sky-300 ...">-mt-8</div>

Sử dụng các thuộc tính logic

Sử dụng các tiện ích ms-<number> hoặc me-<number> như ms-4 và me-8 để thiết lập các thuộc tính logic margin-inline-start và margin-inline-end:

<div>  <div dir="ltr">    <div class="ms-8 ...">ms-8</div>    <div class="me-8 ...">me-8</div>  </div>  <div dir="rtl">    <div class="ms-8 ...">ms-8</div>    <div class="me-8 ...">me-8</div>  </div></div>

Thêm khoảng cách giữa các phần tử con

Sử dụng các tiện ích space-x-<number> hoặc space-y-<number> như space-x-4 và space-y-8 để kiểm soát khoảng cách giữa các phần tử:

<div class="flex space-x-4 ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Đảo ngược thứ tự phần tử con

Nếu các phần tử của bạn theo thứ tự đảo ngược (ví dụ sử dụng flex-row-reverse hoặc flex-col-reverse), hãy sử dụng các tiện ích space-x-reverse hoặc space-y-reverse để đảm bảo khoảng cách được thêm vào đúng phía của mỗi phần tử:

<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Hạn chế

Các tiện ích space thực sự chỉ là một phím tắt để thêm margin vào tất cả-trừ-phần-tử-cuối-cùng trong một nhóm, và không được thiết kế để xử lý các trường hợp phức tạp như lưới, layout bao bọc (wrap), hoặc các tình huống mà các phần tử con được render theo thứ tự tùy chỉnh phức tạp thay vì thứ tự DOM tự nhiên của chúng.

Đối với những tình huống đó, tốt hơn là sử dụng các tiện ích gap khi có thể, hoặc thêm margin vào mọi phần tử với margin âm tương ứng trên phần tử cha.

Ngoài ra, các tiện ích space không được thiết kế để hoạt động cùng với các tiện ích divide. Đối với những tình huống đó, hãy cân nhắc thêm các tiện ích margin/padding vào các phần tử con thay thế.

Sử dụng giá trị tùy chỉnh

Use utilities like m-[<value>],mx-[<value>], and mb-[<value>] to set the margin based on a completely custom value:

<div class="m-[5px] ...">  <!-- ... --></div>

For CSS variables, you can also use the m-(<custom-property>) syntax:

<div class="m-(--my-margin) ...">  <!-- ... --></div>

This is just a shorthand for m-[var(<custom-property>)] that adds the var() function for you automatically.

Thiết kế responsive

Prefix a margin utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="mt-4 md:mt-8 ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.

Tùy chỉnh theme của bạn

The m-<number>,mx-<number>,my-<number>,ms-<number>,me-<number>,mt-<number>,mr-<number>,mb-<number>, and ml-<number> utilities are driven by the --spacing theme variable, which can be customized in your own theme:

@theme {  --spacing: 1px; }

Learn more about customizing the spacing scale in the theme variable documentation.