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 “ đầu ra 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 “ 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 “ 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 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-
< 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:
Đầu ra ở trên cho thấy rằng lề đã được thêm vào đầu vùng chứa.
< 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.
< 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.
< 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