Thuộc tính khoảng cách CSS
Thí dụ
Đặt khoảng cách giữa các hàng và cột thành 50px:
.grid-container {
gap: 50px;
}
Định nghĩa và Cách sử dụng
Thuộc gap
tính xác định kích thước của khoảng cách giữa các hàng và cột. Nó là cách viết tắt của các thuộc tính sau:
Lưu ý: Thuộc gap
tính trước đây được gọi là .
grid-gap
Giá trị mặc định: | bình thường bình thường |
---|---|
Thừa hưởng: | không |
Hoạt hình: | Đúng. Đọc về hoạt hình |
Phiên bản: | Mô-đun căn chỉnh hộp CSS cấp độ 3 |
Cú pháp JavaScript: | đối tượng .style.gap = "50px 100px" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
gap (in Multiple Columns) | 66 | 16 | 61 | Not supported | 53 |
gap (in Grid) | 66 | 16 | 61 | 10.1 | 53 |
gap (in Flexbox) | 84 | 84 | 63 | Not supported | 70 |
Cú pháp CSS
gap: row-gap column-gap;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
row-gap | Sets the size of the gap between the rows in a grid layout | |
column-gap | Sets the size of the gap between the columns in a grid layout |
Các ví dụ khác
Thí dụ
Đặt khoảng cách giữa các hàng thành 20px và các cột thành 50px:
.grid-container {
gap: 20px 50px;
}
Các trang liên quan
Hướng dẫn CSS: Bố cục lưới CSS
Tham chiếu CSS: Thuộc tính row-gap
Tham chiếu CSS: Thuộc tính cột-gap