Thuộc tính border-spacing trong CSS
Bùi Tấn Lực - 183
- 17/10/2025
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, chi tiết như nào hãy cùng chúng tôi phân tích:
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>
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 *
