Thuộc tính border-spacing trong CSS
Bùi Tấn Lực - 907
- 17/10/2025
Chức năng của Thuộc tính border-spacing trong CSS
Thuộc tính border-spacing trong CSS dùng để canh khoảng cách giữa các ô trong table với xung quanh, khoảng cách trên và dưới, trái và phải, thuộc tính này dùng kèm với giá trị separate của thuộc tính border-collapse để quy định các đường viền của các ô tách rời nhau.
Cú pháp của Thuộc tính border-spacing trong CSS
Thuộc tính border-spacing 1 giá trị
border-spacing: giatri;
giatri: Giá trị quy định khoảng cách giữa các ô trong table và xung quanh (Ví dụ: 10px)
Thuộc tính border-spacing 2 giá trị
border-spacing: giatri1 giatri2;
giatri1: Giá trị quy định khoảng cách của các ô trong table so với bên trái và bên phải (Ví dụ: 10px)
giatri2: Giá trị quy định khoảng cách của các ô trong table so với bên trên và bên dưới (Ví dụ: 30px)
Code Thuộc tính border-spacing trong CSS
border-spacing: 10px; khoảng cách giữa các ô trong table và xung quanh là 10px
border-spacing: 10px 30px; các ô trong table cách trên và dưới 30px, cách trái và phải 10px
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-spacing trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
table, td, th {
border: 1px solid black;
}
table {margin-bottom:30px; width:100%; border-collapse: separate;}
</style>
</head>
<body>
<h1>Code Thuộc tính border-spacing trong CSS</h1>
<p>Dùng để canh khoảng cách giữa các ô trong table với xung quanh, khoảng cách trên và dưới, trái và phải, thuộc tính này dùng kèm với giá trị separate của thuộc tính border-collapse để quy định các đường viền của các ô tách rời nhau:</p>
<h2>border-spacing: 10px; khoảng cách giữa các ô trong table và xung quanh là 10px:</h2>
<table style="border-spacing: 10px;" >
<tr>
<th>Họ Tên</th>
<th>Giới Tính</th>
</tr>
<tr>
<td>Bùi Tấn Lực</td>
<td>Nam</td>
</tr>
<tr>
<td>Trần Thị Vân</td>
<td>Nữ</td>
</tr>
</table>
<h2>border-spacing: 10px 30px; các ô trong table cách trái và phải 10px, cách trên và dưới 30px:</h2>
<table style="border-spacing: 10px 30px;" >
<tr>
<th>Họ Tên</th>
<th>Giới Tính</th>
</tr>
<tr>
<td>Bùi Tấn Lực</td>
<td>Nam</td>
</tr>
<tr>
<td>Trần Thị Vân</td>
<td>Nữ</td>
</tr>
</table>
</body>
</html>
Cách sử dụng thuộc tính border-spacing trong CSS
Thuộc tính border-spacing giúp thiết lập khoảng cách giữa các ô của bảng khi đường viền được hiển thị theo kiểu tách biệt. Thay vì phải tạo khoảng cách riêng cho từng ô, có thể áp dụng thuộc tính này trực tiếp cho bảng để kiểm soát bố cục đồng nhất.
Điều chỉnh khoảng cách giữa các ô trong bảng
Giá trị đơn của border-spacing sẽ tạo cùng một khoảng cách theo cả chiều ngang và chiều dọc giữa các ô. Cách này phù hợp khi muốn bảng có các ô thoáng đều, dễ quan sát hơn.
table {
border-spacing: 10px;
}
Trong ví dụ trên, khoảng cách giữa các ô được thiết lập là 10px. Khoảng trống này nằm giữa các đường viền của những ô liền kề, không phải khoảng cách bên trong nội dung của ô.
Thiết lập khoảng cách ngang và dọc cho bảng
Khi cần kiểm soát riêng khoảng cách theo hai hướng, border-spacing có thể nhận hai giá trị. Giá trị thứ nhất áp dụng theo chiều ngang, còn giá trị thứ hai áp dụng theo chiều dọc.
table {
border-spacing: 12px 8px;
}
Cách thiết lập này hữu ích khi bảng có nhiều dữ liệu và cần cân đối độ rộng giữa các cột với khoảng cách giữa các hàng. Chẳng hạn, khoảng cách ngang lớn hơn khoảng cách dọc có thể giúp các cột dễ phân biệt mà không làm bảng bị kéo quá cao.
Kết hợp border-spacing với border-collapse
border-spacing hoạt động hiệu quả khi bảng sử dụng cơ chế đường viền tách biệt. Vì vậy, khi cần kiểm soát khoảng cách giữa các ô, nên chú ý đến giá trị của border-collapse.
table {
border-collapse: separate;
border-spacing: 10px 6px;
}
Trong trường hợp border-collapse được đặt thành collapse, các đường viền của những ô liền kề sẽ được gộp lại nên khoảng cách do border-spacing thiết lập không còn được thể hiện theo cách thông thường. Nếu mục tiêu là tạo khoảng trống rõ ràng giữa từng ô, hãy sử dụng separate và thiết lập khoảng cách phù hợp.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-spacing 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 *
