Thuộc tính row-gap của CSS

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

Thuộc tính row-gap xác định khoảng cách giữa hàng trong bố trí khung co dai hoặc lưới.

Thuộc tính row-gap trước đây được gọi là grid-row-gap.

Xem thêm:

Hướng dẫn CSSBố trí lưới CSS

Hướng dẫn CSSBố trí khung co dai CSS

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

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

thực hành

ví dụ 1

Định nghĩa khoảng cách giữa hàng trong lưới là 50 pixel:

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

thử nghiệm trực tiếp

ví dụ 2: bố trí khung co dai

Đặt khoảng cách giữa hàng trong bố trí khung co dai là 70px:

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

thử nghiệm trực tiếp

cú pháp CSS

row-gap: length|normal|initial|di truyền;
giá trị mô tả
length Đặt khoảng cách giữa hàng bằng độ dài cụ thể hoặc giá trị phần trăm.
normal giá trị mặc định. Định nghĩa khoảng cách giữa hàng.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
di truyền Từ thuộc tính của phần tử cha này. Xem thêm di truyền.

chi tiết kỹ thuật

giá trị mặc định: normal
di truyền: không
sản xuất animation: hỗ trợ. Xem các tính chất riêng lẻ. Xem tại:tính chất liên quan đến animation.
phiên bản: Module对齐 Box CSS Level 3
cú pháp JavaScript: object.style.rowGap="50px"

hỗ trợ trình duyệt

số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ tính chất này.

bố trí Chrome IE / Edge Firefox Safari Opera
trong lưới 66 16 61 12 53
trong khung co dai 84 84 63 14.1 70