Bài đăng này giải thích chi tiết về quy trình hoàn chỉnh để thêm khoảng cách giữa các cột trong Tailwind.
Cách thêm khoảng cách giữa các cột trong Tailwind?
Để thêm khoảng cách giữa các cột trong Tailwind, hãy sử dụng “ khoảng cách-{size} ' tính thiết thực. Nó chỉ định một giá trị số nguyên biểu thị khoảng cách giữa các cột theo chiều ngang và chiều dọc. Hãy thực hiện nhiệm vụ này một cách thực tế với sự trợ giúp của các ví dụ đã nêu.
Cấu trúc tệp dự án
Các ' khoảng cách-{size} ” có thể triển khai tiện ích trong bất kỳ dự án Tailwind nào tuân theo cấu trúc tệp nhất định:
Hãy bắt đầu với ví dụ đầu tiên.
Ví dụ 1: Sử dụng tiện ích “gap-{size}” để thêm khoảng cách giống nhau giữa các hàng và cột
Ví dụ này áp dụng tiện ích “khoảng cách-{size}” để thêm cùng một khoảng cách theo chiều ngang và chiều dọc giữa các cột đã cho.
Mã HTML
Tổng quan về đoạn mã sau:
< cái đầu >
< liên kết href = '/dist/output.css' quan hệ = 'biểu định kiểu' >
< / cái đầu >
< thân hình >
< h1 lớp học = 'text-3xl font-bold text-center gạch chân text-orange-600' > Chào mừng bạn đến với Linuxhint! < / h1 >< anh >
< div lớp học = 'mx-2 grid grid-cols-3 gap-4' >
< div lớp học = 'viền-2 viền-cam-600' > Hướng dẫn đầu tiên < / div >
< div lớp học = 'viền-2 viền-cam-600' > Hướng dẫn thứ hai < / div >
< div lớp học = 'viền-2 viền-cam-600' > Hướng dẫn thứ ba < / div >
< div lớp học = 'viền-2 viền-cam-600' > Hướng dẫn thứ tư < / div >
< div lớp học = 'viền-2 viền-cam-600' > Hướng dẫn thứ năm < / div >
< div lớp học = 'viền-2 viền-cam-600' > Hướng dẫn thứ sáu < / div >
< div lớp học = 'viền-2 viền-cam-600' > Hướng dẫn thứ bảy < / div >
< div lớp học = 'viền-2 viền-cam-600' > Hướng dẫn thứ tám < / div >
< / div >
Trong các dòng mã trên:
- Đầu tiên, liên kết tệp CSS chính “ /dist/output.css ” với tệp HTML hiện có “ index.html ' sử dụng '
” trong phần “head”. - Tiếp theo, phần “body” tạo phần tử “
” sử dụng phần tử “ Cỡ chữ ”, “ Trọng lượng phông chữ ”, “ Căn chỉnh văn bản ”, “ trang trí văn bản ', và ' Văn bản màu ” Tương ứng là các lớp Tailwind.
- Sau đó, một phần tử “” được thêm vào để áp dụng “ lưới ” tiện ích để đặt nội dung của nó theo số lượng bố cục lưới đã nêu, “ lề ” để đặt lề ngang và “ khoảng cách ” tiện ích để thêm khoảng cách được chỉ định giữa các cột.
- Trong phần thân phần tử “
”, thêm tám phần tử “” được bao gồm sử dụng phần “ Chiều rộng biên giới ' và ' Màu viền ” các lớp tương ứng.đầu ra
Chạy mã HTML ở trên trong máy chủ trực tiếp và phân tích đầu ra:
Như đã thấy, đầu ra thêm khoảng cách được chỉ định giữa các cột ở cả hai kích thước một cách thích hợp.
Ví dụ 2: Sử dụng tiện ích “gap-{size}” để thêm khoảng cách giữa các hàng và cột một cách độc lập
Các ' khoảng cách-{size} ” tiện ích cũng có thể được triển khai với kích thước “x(ngang)” và “y(dọc)” là “gap-x-{size}” cho hàng và “gap-y-{size}” cho cột để thêm khoảng cách giữa chúng riêng lẻ.Hãy xem triển khai thực tế của nó.
Mã HTML
< cái đầu >
Hãy xem mã đã cho:
< liên kết href = '/dist/output.css' quan hệ = 'biểu định kiểu' >
< / cái đầu >
< thân hình >
< div lớp học = 'lưới mx-2 grid-cols-4 gap-x-4 gap-y-6' >
< div lớp học = 'viền-2 viền-cam-600' >Hướng dẫn đầu tiên< / div >
< div lớp học = 'viền-2 viền-cam-600' >Hướng dẫn thứ hai< / div >
< div lớp học = 'viền-2 viền-cam-600' >Hướng dẫn thứ ba< / div >
< div lớp học = 'viền-2 viền-cam-600' >Hướng dẫn thứ tư< / div >
< div lớp học = 'viền-2 viền-cam-600' >Hướng dẫn thứ năm< / div >
< div lớp học = 'viền-2 viền-cam-600' >Hướng dẫn thứ sáu< / div >
< div lớp học = 'viền-2 viền-cam-600' >Hướng dẫn thứ bảy< / div >
< div lớp học = 'viền-2 viền-cam-600' >Hướng dẫn thứ tám< / div >
< / div >
< thân hình >Ở đây, “ khoảng cách-x-{size} ” tiện ích thêm khoảng cách giữa các hàng và “ khoảng cách-y-{size} ” thêm khoảng cách được chỉ định giữa các cột một cách độc lập.
đầu ra
Kết quả trên xác minh rằng khoảng cách giữa các hàng và cột được áp dụng tương ứng.
Phần kết luận
“Tailwind CSS” cung cấp một “ khoảng cách-{size} ” tiện ích để thêm khoảng cách giữa các cột. Nó cũng có thể được sử dụng để thêm khoảng cách giữa các hàng và cột một cách riêng biệt thông qua “ khoảng cách-x-{size} ' và ' khoảng cách-y-{size} ” tiện ích. Bài đăng này cung cấp quy trình hoàn chỉnh để thêm khoảng cách giữa các cột trong Tailwind.
- Trong phần thân phần tử “