Cách thêm tiền ký quỹ vào một mặt trong Tailwind?

Cach Them Tien Ky Quy Vao Mot Mat Trong Tailwind



Trong CSS Tailwind, một lề được sử dụng để kiểm soát khoảng cách xung quanh phần tử cụ thể. Nó thêm không gian giữa phần tử được áp dụng và các phần tử xung quanh nó. Tailwind CSS cung cấp một tập hợp các tiện ích lề và giá trị lề cho phép người dùng tùy chỉnh khoảng cách xung quanh các phần tử mong muốn. Hơn nữa, người dùng có thể thêm lề vào một bên, chẳng hạn như trên cùng, dưới cùng, bên trái hoặc bên phải của một phần tử cụ thể.

Blog này sẽ trình bày các ví dụ về cách thêm lề vào một mặt của phần tử trong Tailwind CSS.







Cách thêm tiền ký quỹ vào một mặt trong Tailwind?

Để thêm lề cho một mặt của phần tử trong Tailwind, bạn có thể sử dụng các lớp tiện ích sau:



Để hiểu rõ hơn, hãy xem qua các ví dụ được cung cấp bên dưới.



Ví dụ 1: Thêm lề vào đầu phần tử





Trong ví dụ này, chúng tôi sẽ sử dụng “ mt-14 ” lớp tiện ích trong “

” để thêm 14 đơn vị ký quỹ ở trên cùng:

< thân hình >

< div lớp học = 'h-96 mt-14 bg-tím-500' >

< P lớp học = 'trung tâm văn bản text-5xl' > Lề TRONG CSS đuôi gió P >

div >

thân hình >


Đây:



    • h-96 ” lớp đặt chiều cao của
      vùng chứa thành 96 đơn vị.
    • mt-14 ” lớp áp dụng 14 đơn vị lề cho phần trên cùng của vùng chứa.
    • bg-tím-500 ” đặt màu tím cho nền của vùng chứa.

đầu ra


Đầu ra ở trên cho thấy rằng lề đã được thêm vào đầu vùng chứa.

Ví dụ 2: Thêm lề vào dưới cùng của một phần tử

Trong ví dụ này, chúng tôi sẽ sử dụng “ mb-14 ” lớp học trong “

” phần tử để thêm 14 đơn vị ký quỹ ở dưới cùng của nó:

< thân hình >

< div lớp học = 'h-96 mb-14 bg-tím-500' >

< P lớp học = 'trung tâm văn bản text-5xl' > Lề TRONG CSS đuôi gió P >

div >

thân hình >


đầu ra


Có thể thấy rằng lề đã được thêm vào đáy của vùng chứa.

Ví dụ 3: Thêm lề vào bên trái của một phần tử

Trong ví dụ này, chúng tôi sẽ sử dụng “ ml-14 ” lớp học trong “

” để thêm 14 đơn vị ký quỹ vào bên trái của nó:

< thân hình >

< div lớp học = 'h-96 ml-14 bg-tím-500' >

< P lớp học = 'trung tâm văn bản text-5xl' > Lề TRONG CSS đuôi gió P >

div >

thân hình >


đầu ra


Đầu ra ở trên cho thấy lề đã được thêm vào bên trái của phần tử vùng chứa.

Ví dụ 4: Thêm lề vào bên phải của một phần tử

Trong ví dụ này, chúng tôi sẽ sử dụng “ mr-14 ” lớp học trong “

” để thêm 14 đơn vị ký quỹ vào bên phải của nó:

< thân hình >

< div lớp học = 'h-96 mr-14 bg-tím-500' >

< P lớp học = 'trung tâm văn bản text-5xl' > Lề TRONG CSS đuôi gió P >

div >

thân hình >


đầu ra


Như bạn có thể thấy, lề đã được thêm vào bên phải của vùng chứa một cách hiệu quả.

Phần kết luận

Để thêm lề vào một mặt của phần tử trong Tailwind, bạn có thể sử dụng nhiều lớp tiện ích khác nhau, chẳng hạn như “ ml- ”, “ mr- ”, “ mt- ', Và ' mb- ”. Các lớp này thêm lề vào bên trái, bên phải, trên cùng và dưới cùng của phần tử cụ thể tương ứng. Người dùng có thể chỉ định các giá trị khác nhau cho kích thước của lề. Blog này đã trình bày các ví dụ về cách thêm lề vào một mặt của phần tử trong Tailwind CSS.