Thuộc tính gap trong CSS

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

Thuộc tính gap xác định kích thước khoảng trống giữa hàng và cột trong flexbox, lưới hoặc bố cục nhiều cột. Nó là shorthands 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.

Xem thêm:

Giáo trình CSSBố cục lưới CSS

Giáo trình CSSBố cục khung co giãn CSS

Giáo trình CSSBố cục nhiều cột CSS

Hướng dẫn CSSThuộc tính row-gap

Hướng dẫn CSSThuộc tính column-gap

Ví dụ

Ví dụ 1

Đặt khoảng cách giữa hàng và cột là 50px:

.grid-container {
  gap: 50px;
}

Thử ngay

Ví dụ 2: Bố cục lưới

Đặt khoảng cách giữa các hàng là 20px và giữa các cột là 50px trong bố cục lưới:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

Thử ngay

Ví dụ 3: Bố cục khung co giãn

Đặt khoảng cách giữa các hàng là 20px và giữa các cột là 70px trong bố cục khung co giãn:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

Thử ngay

Ví dụ 4: Bố cục nhiều cột

Đặt khoảng cách giữa các cột trong bố cục nhiều cột là 50px:

#newspaper {
  columns: 3;
  gap: 50px;
}

Thử ngay

Ngữ pháp CSS

gap: row-gap column-gap|initial|inherit;
Giá trị Mô tả
row-gap Đặt kích thước khoảng trống giữa các hàng trong lưới hoặc khung co giãn.
column-gap Đặt kích thước khoảng trống giữa các cột trong lưới, khung co giãn hoặc bố cục nhiều cột.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: normal normal
Kế thừa: Không
Chế tạo animation: Hỗ trợ. Xem thuộc tính riêng lẻ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: Mô đun Định dạng Hộp CSS Cấp 3
Ngữ pháp JavaScript: object.style.gap="50px 100px"

Hỗ trợ trình duyệt

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

bố cục Chrome IE / Edge Firefox Safari Opera
trong lưới 66 16 61 12 53
trong khung co giãn 84 84 63 14.1 70
trong nhiều cột 66 16 61 không hỗ trợ 53