04 แท็ก ใช้ในการวาดเส้นแนวนอนบนหน้าเว็บ แท็กนี้เป็นหนึ่งในแท็ก HTML ที่มีประโยชน์มากที่สุดสำหรับการแยกเนื้อหาโดยการวาดเส้นแนวนอนระหว่างส่วนต่างๆ ในคู่มือนี้ เราจะได้เรียนรู้วิธีเปลี่ยนความหนาของ 14 แท็กโดยใช้ CSS ด้วยวิธีการที่แตกต่างกัน
ไวยากรณ์
hr {
height: value;
border: value;
}
แท็ก hr ใน HTML
21 แท็กย่อมาจากกฎแนวนอน เป็นแท็กปิดตัวเองที่สร้างตัวแบ่งภาพระหว่างส่วนของหน้าเว็บโดยใช้เส้นแนวนอน
ตัวอย่าง
<!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.
วิธีที่ 1:การใช้คุณสมบัติความสูง
ในวิธีนี้ เราใช้ 39 โดยตรง คุณสมบัติของ CSS เพื่อเปลี่ยนความหนาของ 44 แท็ก วิธีการนี้จะควบคุมความหนาของเส้นแนวนอนที่ปรากฏ
ตัวอย่าง
<!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.
วิธีที่ 2:การใช้คุณสมบัติชายแดน
ในวิธีนี้ เราใช้ 58 หรือ 61 คุณสมบัติของ 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>
Two text sections separated by a thick 6px blue horizontal line.
การเปรียบเทียบ
บทสรุป
คุณสามารถเปลี่ยนความหนาของ 74 ได้อย่างง่ายดาย แท็กโดยใช้ CSS 80 วิธีการนั้นตรงไปตรงมาสำหรับเส้นทึบ ในขณะที่ 93 วิธีการนี้ให้ความยืดหยุ่นในการจัดแต่งทรงผมมากขึ้น เลือกตามความต้องการการออกแบบของคุณ
