Điều chỉnh độ dày của phần tử <hr> với CSS – Hướng dẫn nhanh

Thẻ <hr> được dùng để vẽ đường ngang trên trang web. Thẻ này là một trong những thẻ HTML hữu ích nhất để tách nội dung bằng cách vẽ đường ngang giữa các phần khác nhau. Trong hướng dẫn này, chúng ta sẽ học cách thay đổi độ dày của thẻ <hr> sử dụng CSS với các phương pháp khác nhau.

Cú pháp

hr { height: value; border: value; }

Thẻ hr trong HTML

Thẻ <hr> là viết tắt của horizontal rule (quy tắc ngang). Đây là thẻ tự đóng tạo ra bộ phân cách 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>Phần 1</p>
<hr>
<p>Phần 2</p>
</body>
</html>

Hai phần văn bản được tách bởi đường ngang mỏng với khoảng cách phù hợp.

Phương pháp 1: Sử dụng thuộc tính Height

Trong phương pháp này, chúng ta trực tiếp sử dụng thuộc tính height của CSS để thay đổi độ dày của thẻ <hr>. Phương pháp này kiểm soát độ dày đường ngang xuất hiện như thế nào.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
hr {
  height: 5px;
  background-color: black;
  border: none;
  margin: 20px 0;
}
</style>
</head>
<body>
<p>Trên đường kẻ</p>
<hr>
<p>Dưới đường kẻ</p>
</body>
</html>

Hai phần văn bản được tách bởi đường ngang đen dày 5px.

Phương pháp 2: Sử dụng thuộc tính Border

Trong phương pháp này, chúng ta sử dụng thuộc tính border-top hoặc border-bottom 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ế như đường nét đứ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>Trên đường kẻ</p>
<hr>
<p>Dưới đường kẻ</p>
</body>
</html>

Hai phần văn bản được tách bởi đường ngang xanh dày 6px.

So sánh

Kết luận

Bạn có thể dễ dàng thay đổi độ dày của thẻ <hr> sử dụng CSS. Phương pháp height đơn giản cho đường liền, trong khi phương pháp border cung cấp sự linh hoạt kiểu dáng nhiều hơn. Chọn dựa trên yêu cầu thiết kế của bạn.