คุณสมบัติ columnGap ของ HTML DOM Style: ระยะห่างคอลัมน์

คุณสมบัติ columnGap ใช้สำหรับระบุระยะห่างระหว่างคอลัมน์ขององค์ประกอบ (ทำงานร่วมกับ CSS Multi-column Layout)

ไวยากรณ์ (Syntax)

object.style.columnGap = "length|normal|initial|inherit"

ค่าที่รองรับ

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
<style>
  div {
    column-count: 4;
    column-gap: 50px;
    font-size: 1.2rem;
  }
</style>
<script>
  function changeColumnGap() {
    document.getElementsByTagName("div")[0].style.columnGap = "10px";
    document.getElementById("Sample").innerHTML = "ระยะห่างคอลัมน์ถูกลดลงเป็น 10px แล้ว";
  }
</script>
</head>
<body>
<div>
  นี่คือข้อความตัวอย่างภายใน div นี่คือบรรทัดที่สองของ div นี่คือบรรทัดที่สามของ div
  นี่คือบรรทัดที่สี่ของ div นี่คือบรรทัดที่ห้าของ div นี่คือบรรทัดที่หกของ div
  นี่คือบรรทัดที่เจ็ดของ div นี่คือบรรทัดที่แปดของ div นี่คือบรรทัดที่เก้าของ div
  นี่คือบรรทัดที่สิบของ div นี่คือบรรทัดที่สิบเอ็ดของ div นี่คือบรรทัดที่สิบสองของ div
  นี่คือบรรทัดที่สิบสามของ div นี่คือบรรทัดที่สิบสี่ของ div นี่คือบรรทัดที่สิบห้าของ div
  นี่คือบรรทัดที่สิบหกของ div นี่คือบรรทัดที่สิบเจ็ดของ div นี่คือบรรทัดที่สิบแปดของ div
</div>
<p>คลิกปุ่มเพื่อเปลี่ยนระยะห่างคอลัมน์ของ div ด้านบน</p>
<button onclick="changeColumnGap()">เปลี่ยน Column Gap</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: ระยะห่างคอลัมน์ 50px
หลัง: ระยะห่างคอลัมน์ 10px

การใช้งานร่วมกับคุณสมบัติ Multi-column อื่นๆ

.multi-col {
  column-count: 3;
  column-gap: 2rem;        /* ระยะห่าง */
  column-rule: 1px solid #ccc; /* เส้นกั้น */
  column-width: 200px;     /* ความกว้างขั้นต่ำ */
}

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

การรองรับเบราว์เซอร์

รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด (Chrome 50+, Firefox 52+, Safari 10+, Edge 12+)

ชื่อคุณสมบัติ CSS: column-gap (รองรับใน Flexbox และ Grid ด้วย)