Thuộc tính column-rule-width trong CSS
Bùi Tấn Lực - 860
- 16/10/2025
Chức năng của Thuộc tính column-rule-width trong CSS
Thuộc tính column-rule-width trong CSS dùng để quy định độ rộng của đường kẻ nằm giữa các cột trong bố cục nhiều cột.
Cú pháp của Thuộc tính column-rule-width trong CSS
column-rule-width: giatri;
giatri: Giá trị để quy định độ rộng của đường kẻ nằm giữa các cột trong bố cục nhiều cột (Ví dụ: 5px, 10px, thin, medium, thick,...)
Các giá trị của Thuộc tính column-rule-width trong CSS
px: Độ rộng bằng px
thin: Độ rộng mỏng
medium: Độ rộng vừa
thick: Độ rộng dày
Code Thuộc tính column-rule-width trong CSS
column-rule-width: 5px; Độ rộng 5px
column-rule-width: thin; Độ rộng mỏng
column-rule-width: medium; Độ rộng vừa
column-rule-width: thick; Độ rộng dày
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính column-rule-width 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; column-count: 3; column-gap: 40px; column-rule-style: solid; column-rule-color: #ff0000;}
</style>
</head>
<body>
<h1>Code Thuộc tính column-rule-width trong CSS</h1>
<p>Quy định độ rộng của đường kẻ nằm giữa các cột trong bố cục nhiều cột:</p>
<h4>column-rule-width: 5px; Độ rộng 5px</h4>
<div class="divcha" style="column-rule-width: 5px;">
Hãy Chạy thử Code Thuộc tính column-rule-width 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ả, Hãy Chạy thử Code Thuộc tính column-rule-width 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-rule-width: 1px; Độ rộng 1px</h4>
<div class="divcha" style="column-rule-width: 1px;">
Hãy Chạy thử Code Thuộc tính column-rule-width 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ả, Hãy Chạy thử Code Thuộc tính column-rule-width 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-rule-width: thin; Độ rộng mỏng</h4>
<div class="divcha" style="column-rule-width: thin;">
Hãy Chạy thử Code Thuộc tính column-rule-width 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ả, Hãy Chạy thử Code Thuộc tính column-rule-width 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-rule-width: medium; Độ rộng vừa</h4>
<div class="divcha" style="column-rule-width: medium;">
Hãy Chạy thử Code Thuộc tính column-rule-width 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ả, Hãy Chạy thử Code Thuộc tính column-rule-width 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-rule-width: thick; Độ rộng dày</h4>
<div class="divcha" style="column-rule-width: thick;">
Hãy Chạy thử Code Thuộc tính column-rule-width 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ả, Hãy Chạy thử Code Thuộc tính column-rule-width 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>
Ứng dụng thuộc tính column-rule-width trong CSS
column-rule-width phát huy tác dụng khi nội dung được chia thành nhiều cột bằng CSS. Thay vì để đường phân cách quá mảnh hoặc quá nổi bật, thuộc tính này giúp kiểm soát độ dày để phù hợp với bố cục và mức độ nhấn mạnh mà giao diện cần.
Tạo đường phân cách rõ ràng giữa các cột nội dung
Khi một khối văn bản có nhiều cột, đường kẻ giữa các cột giúp người đọc nhận biết ranh giới và theo dõi nội dung dễ dàng hơn. Có thể tăng column-rule-width khi cần tạo điểm phân tách rõ, hoặc giữ độ dày nhỏ để giao diện nhẹ mắt.
Thuộc tính này chỉ điều chỉnh độ rộng của đường kẻ, còn đường kẻ có hiển thị hay không vẫn phụ thuộc vào kiểu đường viền được thiết lập bằng column-rule-style.
Kết hợp column-rule-width với column-rule-style và column-rule-color
Để tạo một đường phân cách hoàn chỉnh, nên kết hợp độ dày với kiểu và màu sắc của đường kẻ. Ba thuộc tính này lần lượt kiểm soát độ rộng, kiểu hiển thị và màu, giúp đường phân cách hòa hợp với thiết kế tổng thể.
.noidung {
column-count: 3;
column-rule-width: 2px;
column-rule-style: solid;
column-rule-color: #ccc;
}
Cách kết hợp này phù hợp với các bố cục nhiều cột cần sự phân tách rõ ràng nhưng vẫn giữ được tính cân đối. Nếu muốn khai báo ngắn gọn hơn, có thể sử dụng thuộc tính column-rule để thiết lập nhiều giá trị trong cùng một dòng.
Điều chỉnh độ rộng đường kẻ phù hợp với thiết kế website
Không nên mặc định sử dụng đường kẻ quá dày chỉ để tạo sự nổi bật. Với nội dung văn bản thông thường, độ dày nhỏ thường đủ để phân biệt các cột mà không làm người đọc mất tập trung.
Trong giao diện có nhiều cột hoặc kích thước chữ lớn, có thể tăng độ dày để đường phân cách dễ nhận biết hơn. Quan trọng nhất là giữ sự cân bằng giữa column-rule-width, khoảng cách giữa các cột và màu sắc của đường kẻ.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính column-rule-width 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 *
