Thuộc tính khoảng cách CSS
Ví dụ
Đặt khoảng cách giữa các hàng và giữa các cột thành 50px:
.grid-container {
gap: 50px;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính gap
xác định kích thước khoảng cách giữa các hàng và giữa các cột trong bố cục flexbox, lưới hoặc nhiều cột. Nó là viết tắt của các thuộc tính sau:
Lưu ý: Thuộc tính gap
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 Hãy thử nó |
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ãy dùng thử |
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 Grid) | 66 | 16 | 61 | 12 | 53 |
gap (in Flexbox) | 84 | 84 | 63 | 14.1 | 70 |
gap (in Multiple Columns) | 66 | 16 | 61 | Not supported | 53 |
Cú pháp CSS
gap: row-gap column-gap |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
row-gap | Sets the size of the gap between the rows in a grid or flexbox layout | Demo ❯ |
column-gap | Sets the size of the gap between the columns in a grid, flexbox or multi-column layout | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Bố cục lưới
Đặt khoảng cách giữa các hàng thành 20px và các cột thành 50px trong bố cục lưới:
#grid-container {
display: grid;
gap: 20px 50px;
}
Hãy tự mình thử »Bố cục hộp linh hoạt
Đặt khoảng cách giữa các hàng thành 20px và các cột thành 70px trong bố cục flexbox:
#flex-container {
display: flex;
gap: 20px 70px;
}
Hãy tự mình thử »Bố cục nhiều cột
Đặt khoảng cách giữa các cột thành 50px trong bố cục nhiều cột:
#newspaper {
columns: 3;
gap: 50px;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Bố cục lưới CSS
Hướng dẫn CSS: Bố cục CSS Flexbox
Hướng dẫn CSS: Bố cục cột Muilti CSS
Tham khảo CSS: thuộc tính khoảng cách hàng
Tham khảo CSS: thuộc tính khoảng cách cột