Thuộc tính column-gap trong CSS

Định nghĩa và cách sử dụng

Thuộc tính column-gap định nghĩa khoảng cách giữa các cột.

Ghi chú:Nếu giữa các cột được thiết lập column-ruleNó sẽ hiển thị ở giữa khoảng cách.

Xem thêm:

Hướng dẫn CSS3:CSS3 nhiều cột

Hướng dẫn tham khảo HTML DOM:Thuộc tính columnGap

Ví dụ

Định nghĩa khoảng cách giữa các cột là 40 pixel:

div {
  column-gap: 40px;
}

Thử ngay

Có thêm ví dụ ở cuối trang.

Cú pháp CSS

column-gap: length|normal;

Giá trị thuộc tính

Giá trị Mô tả Kiểm tra
length Đặt khoảng cách giữa các cột thành độ dài đã chỉ định. Kiểm tra
normal Định nghĩa khoảng cách giữa các cột là một khoảng cách tiêu chuẩn. Giá trị được khuyến nghị bởi W3C là 1em. Kiểm tra

Chi tiết kỹ thuật

Giá trị mặc định: normal
Kế thừa: no
Phiên bản: CSS3
Cú pháp JavaScript: object.style.columnGap="40px"

Thực hành thêm

Column-count
Chia văn bản trong phần tử div thành ba cột.
Column-rule
Định nghĩa độ rộng, phong cách và màu sắc giữa các cột.

Hỗ trợ trình duyệt

Số liệu trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Số liệu với tiền tố -webkit- hoặc -moz- biểu thị phiên bản đầu tiên sử dụng tiền tố.

thuộc tính Chrome IE / Edge Firefox Safari Opera
trong nhiều cột 50 10 52 10 37
trong lưới 66 16 61 12 53
trong khung co dien 84 84 63 14.1 70