không gian ngang là một khoảng trống dọc theo trục x giữa các phần tử con của bộ chứa flex hoặc grid khi chúng được sắp xếp thành một hàng. không gian dọc là một khoảng trống dọc theo trục y giữa các phần tử con của bộ chứa flex hoặc lưới khi chúng được sắp xếp trong một cột.
Bài viết này sẽ chứng minh:
- Cách thêm khoảng cách ngang giữa các thành phần trong Tailwind?
- Cách thêm khoảng cách dọc giữa các thành phần trong Tailwind?
Cách thêm khoảng cách ngang giữa các thành phần trong Tailwind?
Để thêm khoảng cách ngang giữa các phần tử trong Tailwind, hãy chọn “ dấu cách-x-
cú pháp
< phần tử lớp học = 'dấu cách-x-
Ở đây, “x” đại diện cho “trục x” hoặc “không gian nằm ngang”. Đảm bảo thay thế “
Ví dụ: Áp dụng khoảng cách ngang giữa các phần tử trong Tailwind
Trong ví dụ này, chúng ta có một flex container với một số phần tử con. Chúng tôi sẽ sử dụng “ dấu cách-x-8 ” lớp tiện ích với “ Ở đây, trong phần tử cha Trong các phần tử đầu ra Đầu ra ở trên chỉ ra rằng khoảng cách ngang giữa phần tử flex đã được áp dụng thành công. Để thêm khoảng cách dọc giữa các thành phần trong Tailwind, hãy chọn “ dấu cách-y- cú pháp Ở đây, “y” đại diện cho “trục y” hoặc “không gian dọc”. Đảm bảo thay thế “ Ví dụ: Áp dụng khoảng cách dọc giữa các phần tử trong Tailwind Trong ví dụ này, chúng ta có một thùng chứa linh hoạt với một số phần tử con trong một cột. Chúng tôi sẽ sử dụng “ không gian-y-5 ” lớp tiện ích với “ Đây: đầu ra Không gian dọc giữa các phần tử flex đã được áp dụng hiệu quả. Để thêm khoảng cách ngang và dọc giữa các thành phần trong Tailwind, hãy chọn “ dấu cách-x-
< thân hình >
< div lớp học = 'flex space-x-8 m-10 h-20 w-max' >
< div lớp học = 'bg-teal-500 w-20 p-5' > 1 < / div >
< div lớp học = 'bg-teal-500 w-20 p-5' > 2 < / div >
< div lớp học = 'bg-teal-500 w-20 p-5' > 3 < / div >
< div lớp học = 'bg-teal-500 w-20 p-5' > 4 < / div >
< div lớp học = 'bg-teal-500 w-20 p-5' > 5 < / div >
< div lớp học = 'bg-teal-500 w-20 p-5' > 6 < / div >
< / div >
< / thân hình >
Cách thêm khoảng cách dọc giữa các thành phần trong Tailwind?
< div lớp học = 'trung tâm văn bản flex flex-col space-y-5 m-10' >
< div lớp học = 'bg-teal-500 p-5' > 1 < / div >
< div lớp học = 'bg-teal-500 p-5' > 2 < / div >
< div lớp học = 'bg-teal-500 p-5' > 3 < / div >
< div lớp học = 'bg-teal-500 p-5' > 4 < / div >
< / div >
< / thân hình >
Phần kết luận