Thuộc tính columnGap trong HTML DOM Style

Thuộc tính columnGap dùng để chỉ định khoảng cách giữa các cột của phần tử (trong bố cục đa cột - multi-column layout).

Cú pháp

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

Giá trị tham số

Ví dụ minh họa

<!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 = "Khoảng cách cột đã được giảm xuống";
  }
</script>
</head>
<body>
<div>
  Đây là văn bản mẫu bên trong div. Dòng thứ hai. Dòng thứ ba. Dòng thứ tư. Dòng thứ năm. Dòng thứ sáu.
  Dòng thứ bảy. Dòng thứ tám. Dòng thứ chín. Dòng thứ mười. Dòng thứ mười một. Dòng thứ mười hai.
  Dòng thứ mười ba. Dòng thứ mười tư. Dòng thứ mười lăm. Dòng thứ mười sáu. Dòng thứ mười bảy. Dòng thứ mười tám.
</div>
<p>Thay đổi column gap của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeColumnGap()">Thay đổi Column Gap</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Ban đầu column-gap 50px. Sau khi nhấn "Thay đổi Column Gap", khoảng cách giảm còn 10px, nội dung các cột sát nhau hơn.