การตั้งค่าช่องว่างคอลัมน์ด้วย CSS3 (column-gap)

เพื่อตั้งค่าช่องว่างระหว่างคอลัมน์ใน CSS3 ให้ใช้คุณสมบัติ column-gap ตั้งค่าได้ดังนี้:

column-gap: length | normal | initial | inherit;

ตัวอย่างที่ 1: กำหนด column-gap 25px

<!DOCTYPE html> <html> <head> <style> .demo {    column-count: 4;    -webkit-column-count: 4;    -moz-column-count: 4;    -webkit-column-gap: 25px;    -moz-column-gap: 25px;    column-gap: 25px; } </style> </head> <body> <h1>Machine Learning</h1> <div class="demo"> Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing... </div> </body> </html>

ผลลัพธ์

การตั้งค่าช่องว่างคอลัมน์ด้วย CSS3 (column-gap)

ตัวอย่างที่ 2: ใช้ค่า normal (ค่าเริ่มต้น)

<!DOCTYPE html> <html> <head> <style> .demo {    column-count: 2;    -webkit-column-count: 2;    -moz-column-count: 2;    -webkit-column-gap: normal;    -moz-column-gap: normal;    column-gap: normal; } </style> </head> <body> <h1>Machine Learning</h1> <div class="demo"> Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing... </div> </body> </html>

ผลลัพธ์

การตั้งค่าช่องว่างคอลัมน์ด้วย CSS3 (column-gap)

คำอธิบาย

length - ความกว้างช่องว่างระหว่างคอลัมน์ (px, em, rem, %)
normal - ค่าเริ่มต้นของเบราว์เซอร์ (ปกติคือ 1em หรือประมาณ 16px)
initial - คืนค่าเริ่มต้น
inherit - สืบทอดจากพ่อ

คุณสมบัติคอลัมน์ที่เกี่ยวข้อง

columns: 200px 3;        /* shorthand: width count */
column-width: 200px;     /* ความกว้างขั้นต่ำ */
column-count: 3;         /* จำนวนสูงสุด */
column-gap: 20px;        /* ช่องว่าง */
column-rule: 1px solid;  /* เส้นแบ่ง */
column-fill: balance;    /* balance | auto */
column-span: all;        /* ให้ heading ข้ามคอลัมน์ */

หมายเหตุ: column-gap ทำงานกับ multi-column layout, flexbox, และ grid ได้ทั้งหมด