Thuộc tính column-gap trong CSS
Bùi Tấn Lực - 905
- 16/10/2025
Chức năng của Thuộc tính column-gap trong CSS
Thuộc tính column-gap trong CSS dùng để quy định khoảng cách giữa các cột, thuộc tính này thường dùng kết hợp với thuộc tính column-count hoặc column-width.
Cú pháp của Thuộc tính column-gap trong CSS
column-gap: giatri;
giatri: Giá trị để quy định khoảng cách giữa các cột (Ví dụ 40px)
Code Thuộc tính column-gap trong CSS
column-gap: 40px; Mỗi cột cách nhau 40px
column-gap: 150px; Mỗi cột cách nhau 150px
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính column-gap trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{width:100%; height:auto; margin-bottom:10px; border:1px solid red;}
</style>
</head>
<body>
<h1>Code Thuộc tính column-gap trong CSS</h1>
<p>Quy định khoảng cách giữa các cột, thuộc tính này thường dùng kết hợp với thuộc tính column-count hoặc column-width:</p>
<h4>column-gap: 40px;column-count: 3; Chia nội dung ra 3 cột, mỗi cột cách nhau 40px </h4>
<div class="divcha" style="column-gap: 40px;column-count: 3;">
Hãy Chạy thử Code Thuộc tính column-gap trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
<h4>column-gap: 150px;column-count: 3; Chia nội dung ra 3 cột, mỗi cột cách nhau 150px </h4>
<div class="divcha" style="column-gap: 150px;column-count: 3;">
Hãy Chạy thử Code Thuộc tính column-gap trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
<h4>column-gap: 40px; column-width: 100px; Chiều rộng tối thiểu của mỗi cột là 100px, mỗi cột cách nhau 40px </h4>
<div class="divcha" style="column-gap: 40px; column-width: 100px;">
Hãy Chạy thử Code Thuộc tính column-gap trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
<h4>column-gap: 150px; column-width: 100px; Chiều rộng tối thiểu của mỗi cột là 100px, mỗi cột cách nhau 150px </h4>
<div class="divcha" style="column-gap: 150px; column-width: 100px;">
Hãy Chạy thử Code Thuộc tính column-gap trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
</body>
</html>
Cách sử dụng column-gap hiệu quả trong CSS
column-gap phát huy tác dụng rõ nhất khi được kết hợp với các thuộc tính chia cột khác. Việc lựa chọn cách phối hợp phù hợp giúp kiểm soát số lượng cột, độ rộng nội dung và khoảng cách giữa chúng mà không cần tạo thêm phần tử HTML.
Kết hợp column-gap với column-count
Khi cần chia nội dung thành một số cột cố định, column-count xác định số lượng cột còn column-gap kiểm soát khoảng trống giữa các cột. Hai thuộc tính này thường được sử dụng cùng nhau để tạo bố cục nhiều cột cân đối.
Ví dụ dưới đây chia nội dung thành 3 cột và tạo khoảng cách 30px giữa từng cột:
<div class="noidung">
Nội dung được chia thành nhiều cột trong CSS.
</div>
.noidung {
column-count: 3;
column-gap: 30px;
}
Cách kết hợp này phù hợp với những khu vực như bài viết, danh sách thông tin hoặc nội dung văn bản dài, nơi số cột được xác định trước.
Kết hợp column-gap với column-width
Trong trường hợp muốn ưu tiên độ rộng tối thiểu của mỗi cột thay vì cố định số cột, có thể dùng column-width cùng column-gap. Trình duyệt sẽ tự tính số cột phù hợp với không gian hiển thị.
Ví dụ:
<div class="noidung">
Nội dung có thể tự điều chỉnh số lượng cột theo chiều rộng màn hình.
</div>
.noidung {
column-width: 220px;
column-gap: 25px;
}
Cách này đặc biệt hữu ích với giao diện có kích thước thay đổi theo màn hình, vì số cột có thể tự điều chỉnh khi không gian hiển thị thay đổi.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính column-gap trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
