Thiết lập khoảng cách cột (Column Gap) bằng CSS3

Để thiết lập khoảng cách giữa các cột bằng CSS3, sử dụng thuộc tính column-gap.

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

Ví dụ 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">
  Trí tuệ nhân tạo (AI) ngày nay đã vượt xa hype của blockchain và quantum computing. 
  Điều này do nguồn tính toán khổng lồ dễ dàng tiếp cận cho người phổ thông. 
  Các developer tận dụng điều này để tạo mô hình Machine Learning mới và re-train 
  mô hình hiện có cho hiệu năng và kết quả tốt hơn. 
  Sự dễ dàng tiếp cận High Performance Computing (HPC) đã làm tăng đột biến 
  nhu cầu chuyên gia IT có kỹ năng Machine Learning.
</div>
</body>
</html>

Kết quả

Ví dụ 2: column-gap normal (mặc định)

<!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">
  Trí tuệ nhân tạo (AI) ngày nay đã vượt xa hype của blockchain và quantum computing. 
  Điều này do nguồn tính toán khổng lồ dễ dàng tiếp cận cho người phổ thông. 
  Các developer tận dụng điều này để tạo mô hình Machine Learning mới và re-train 
  mô hình hiện có cho hiệu năng và kết quả tốt hơn. 
  Sự dễ dàng tiếp cận High Performance Computing (HPC) đã làm tăng đột biến 
  nhu cầu chuyên gia IT có kỹ năng Machine Learning.
</div>
</body>
</html>

Kết quả

Lưu ý:

• normal thường khoảng 1em (tùy trình duyệt)
• Có thể dùng bất kỳ đơn vị độ dài nào: px, em, rem, %
• Cùng dùng với column-count hoặc column-width
• Có shorthand columns nhưng không bao gồm gap