แท็ก <hr> ใช้วาดเส้นแนวนอนบนหน้าเว็บ แท็กนี้เป็นหนึ่งในแท็ก HTML ที่มีประโยชน์ที่สุดสำหรับแยกเนื้อหาด้วยการวาดเส้นแนวนอนระหว่างส่วนต่างๆ ในคู่มือนี้ เราจะเรียนรู้วิธีเปลี่ยนความหนาของแท็ก <hr> ด้วย CSS ด้วยวิธีต่างๆ
Syntax
hr { height: value; border: value; }
แท็ก hr ใน HTML
แท็ก <hr> ย่อมาจาก Horizontal Rule เป็น Self-closing Tag สร้าง Divider แบบภาพระหว่างส่วนของหน้าเว็บด้วยเส้นแนวนอน
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> hr { margin: 20px 0; } </style> </head> <body> <p>Section 1</p> <hr> <p>Section 2</p> </body> </html>
สองส่วนข้อความ แยกด้วยเส้นแนวนอนบาง พร้อม Spacing ที่เหมาะสม
วิธีที่ 1: ใช้ Property Height
ในวิธีนี้ เราใช้ Property height ของ CSS โดยตรงเพื่อเปลี่ยนความหนาของแท็ก <hr> วิธีนี้ควบคุมว่าเส้นแนวนอนจะหนาแค่ไหน
ตัวอย่าง
<!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>
สองส่วนข้อความ แยกด้วยเส้นแนวนอนสีดำหนา 5px
วิธีที่ 2: ใช้ Property Border
ในวิธีนี้ เราใช้ Property border-top หรือ border-bottom ของ CSS เพื่อสร้างเส้นแนวนอนหนาขึ้น วิธีนี้ยืดหยุ่นกว่า และรองรับดีไซน์ต่างๆ เช่น เส้นประหรือจุด
ตัวอย่าง
<!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>
สองส่วนข้อความ แยกด้วยเส้นแนวนอนสีน้ำเงินหนา 6px
การเปรียบเทียบ
| วิธี | ข้อได้เปรียบ | เหมาะสำหรับ |
|---|---|---|
| Height Property | เรียบง่าย ตรงไปตรงมา | เส้นทึบสีเดียว |
| Border Property | ปรับแต่งสไตล์ได้มากขึ้น | เส้นประ จุด หรือสไตล์ต่างๆ |
สรุป
คุณสามารถเปลี่ยนความหนาของแท็ก <hr> ได้ง่ายด้วย CSS วิธี height เรียบง่ายสำหรับเส้นทึบ ในขณะที่วิธี border ให้ความยืดหยุ่นด้านสไตล์มากขึ้น เลือกตามความต้องการดีไซน์ของคุณ
