<hr> thẻ được sử dụng để vẽ các đường ngang trên trang web. Thẻ này là một trong những thẻ HTML hữu ích nhất để phân tách nội dung bằng cách vẽ một đường ngang giữa các phần khác nhau. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách thay đổi độ dày của <hr> gắn thẻ bằng CSS với các phương pháp khác nhau.
Cú pháp
hr {
height: value;
border: value;
}
Thẻ giờ trong HTML
<hr> thẻ là viết tắt của quy tắc ngang. Đây là thẻ tự đóng, tạo ra sự phân chia trực quan giữa các phần của trang web bằng đường ngang.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
hr {
margin: 20px 0;
}
</style>
</head>
<body>
<p>Section 1</p>
<hr>
<p>Section 2</p>
</body>
</html>
Two text sections separated by a thin horizontal line with proper spacing.
Phương pháp 1:Sử dụng thuộc tính chiều cao
Trong phương pháp này, chúng tôi trực tiếp sử dụng height thuộc tính của CSS để thay đổi độ dày của <hr> thẻ. Phương pháp này kiểm soát độ dày của đường ngang xuất hiện
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
hr {
height: 5px;
background-color: black;
border: none;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Above the line</p>
<hr>
<p>Below the line</p>
</body>
</html>
Two text sections separated by a thick 5px black horizontal line.
Phương pháp 2:Sử dụng thuộc tính viền
Trong phương pháp này, chúng tôi sử dụng border-top hoặc border-bottom thuộc tính của CSS để tạo đường ngang dày hơn. Phương pháp này linh hoạt hơn và hỗ trợ nhiều thiết kế khác nhau như đường đứt nét hoặc chấm
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
hr {
border: none;
border-top: 6px solid blue;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Above the Line</p>
<hr>
<p>Below the Line</p>
</body>
</html>
Two text sections separated by a thick 6px blue horizontal line.
So sánh
Kết luận
Bạn có thể dễ dàng thay đổi độ dày của <hr> thẻ bằng CSS. height phương pháp này đơn giản đối với các đường liền nét, trong khi border phương pháp cung cấp nhiều kiểu dáng linh hoạt hơn. Chọn dựa trên yêu cầu thiết kế của bạn.
