คุณสมบัติช่องว่าง CSS
ตัวอย่าง
กำหนดช่องว่างระหว่างแถวและคอลัมน์เป็น 50px:
.grid-container {
gap: 50px;
}
ความหมายและการใช้งาน
คุณสมบัติgap
กำหนดขนาดของช่องว่างระหว่างแถวและคอลัมน์ เป็นชวเลขสำหรับคุณสมบัติดังต่อไปนี้:
หมายเหตุ:คุณสมบัติgap
นี้เดิมเรียกว่า.
grid-gap
ค่าเริ่มต้น: | ปกติ ปกติ |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS Box Alignment Module ระดับ 3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.gap="50px 100px" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
gap (in Multiple Columns) | 66 | 16 | 61 | Not supported | 53 |
gap (in Grid) | 66 | 16 | 61 | 10.1 | 53 |
gap (in Flexbox) | 84 | 84 | 63 | Not supported | 70 |
ไวยากรณ์ CSS
gap: row-gap column-gap;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
row-gap | Sets the size of the gap between the rows in a grid layout | |
column-gap | Sets the size of the gap between the columns in a grid layout |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
กำหนดช่องว่างระหว่างแถวเป็น 20px และคอลัมน์เป็น 50px:
.grid-container {
gap: 20px 50px;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Grid Layout
การอ้างอิง CSS: คุณสมบัติrow -gap
การอ้างอิง CSS: คุณสมบัติช่องว่างของคอลัมน์