Thuộc tính khoảng cách cột CSS
Ví dụ
Chỉ định khoảng cách 40 pixel giữa các cột trong bố cục nhiều cột:
div
{
column-gap: 40px;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính column-gap
chỉ định khoảng cách giữa các cột trong bố cục lưới, flexbox hoặc nhiều cột.
Lưu ý: Nếu có column-rule
giữa các cột thì nó sẽ xuất hiện ở giữa khoảng trống.
Giá trị mặc định: | 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.columnGap="50px" 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 | |||||
---|---|---|---|---|---|
column-gap (in Multiple Columns) | 50 | 10 | 52 | 10 | 37 |
column-gap (in Grid) | 66 | 16 | 61 | 12 | 53 |
column-gap (in Flexbox) | 84 | 84 | 63 | 14.1 | 70 |
Cú pháp CSS
column-gap: length |normal|initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
length | A specified length that will set the gap between the columns | Demo ❯ |
normal | Default value. Specifies a normal gap between the columns. W3C suggests a value of 1em | 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ụ
Quy tắc cột
Chỉ định chiều rộng, kiểu và màu của quy tắc giữa các cột:
div
{
column-rule: 4px double #ff00ff;
}
Hãy tự mình thử »Bố cục hộp linh hoạt
Đặt khoảng cách giữa các cột thành 30px trong bố cục flexbox:
#flex-container {
display: flex;
column-gap: 30px;
}
Hãy tự mình thử »Bố cục lưới
Đặt khoảng cách giữa các cột thành 30px trong bố cục lưới:
#grid-container {
display: grid;
column-gap: 30px;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: CSS nhiều cột
Hướng dẫn CSS: Bố cục CSS Flexbox
Hướng dẫn CSS: Bố cục lưới 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
Tham chiếu DOM HTML: thuộc tính cộtGap