CSS gap

การใช้งานและการระบุ

คุณสมบัติ gap กำหนดขนาดช่องว่างระหว่างบรรทัดและคอลัมน์ใน flexbox、grid หรือ layout หลายบรรทัด。มันเป็นคุณสมบัติสั้นๆ ของคุณสมบัติต่อไปนี้:

จำเป็นต้องระวัง:คุณสมบัติ gap ก่อนหน้านี้เรียกว่า grid-gap。

ดูเพิ่มเติม:

ตัวเรียน CSSlayout grid CSS

ตัวเรียน CSSlayout flexbox CSS

ตัวเรียน CSSlayout หลายบรรทัด CSS

คู่มือ CSSคุณสมบัติ row-gap

คู่มือ CSSคุณสมบัติ column-gap

ตัวอย่าง

ตัวอย่าง 1

ตั้งค่าระยะห่างระหว่างบรรทัดและคอลัมน์เป็น 50px:

.grid-container {
  gap: 50px;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2: layout grid

ตั้งค่าระยะห่างระหว่างบรรทัดเป็น 20px และระยะห่างระหว่างคอลัมน์เป็น 50px ใน layout grid:

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

ทดลองด้วยตัวเอง

ตัวอย่าง 3: layout flexbox

ตั้งค่าระยะห่างระหว่างบรรทัดเป็น 20px และระยะห่างระหว่างคอลัมน์เป็น 70px ใน layout flexbox:

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

ทดลองด้วยตัวเอง

ตัวอย่าง 4: layout หลายบรรทัด

ตั้งค่าระยะห่างระหว่างคอลัมน์ใน layout หลายบรรทัดเป็น 50px:

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

ทดลองด้วยตัวเอง

ระบบการเขียน CSS

gap: row-gap column-gap|initial|inherit;
ค่า คำอธิบาย
row-gap ตั้งค่าขนาดช่องว่างระหว่างบรรทัดใน grid หรือ flexbox
column-gap ตั้งค่าขนาดช่องว่างระหว่างคอลัมน์ใน grid、flexbox หรือ layout หลายบรรทัด
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้นของมัน。ดูที่: initial。
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของเขา。ดูที่: inherit。

รายละเอียดเทคนิค

ค่าเริ่มต้น: normal normal
การสืบทอด: ไม่
การสร้างแอนิเมชัน: สนับสนุน。โปรดดูคุณสมบัติเดี่ยวๆ โดยเฉพาะ。ดูที่:คุณสมบัติที่เกี่ยวข้องกับอนุรักษ์。
เวอร์ชัน: CSS Box Alignment Module Level 3
ระบบการเขียน JavaScript: object.style.gap="50px 100px"

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางแสดงความสนับสนุนความงามนี้ในสำหรับเวอร์ชันบราวเซอร์แรกที่สนับสนุนความงามนี้。

layout Chrome IE / Edge Firefox Safari Opera
ใน grid 66 16 61 12 53
ใน flexbox 84 84 63 14.1 70
ในบรรทัดหลายบรรทัด 66 16 61 ไม่สนับสนุน 53