การตั้งค่าความสูงบรรทัดด้วย CSS (line-height)

เพื่อตั้งค่าความสูงบรรทัด ให้ใช้คุณสมบัติ line-height ค่าที่ใช้ได้มีดังนี้:

line-height: normal | number | length | percentage | initial | inherit;

ตัวอย่างที่ 1: ใช้ตัวเลข (unitless) - แนะนำ

<!DOCTYPE html> <html> <head> <style> div {    line-height: 1.9; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>This is demo text.<br> This is another demo text. </p> </div> </body> </html>

ผลลัพธ์

ตัวอย่างที่ 2: ใช้เปอร์เซ็นต์

<!DOCTYPE html> <html> <head> <style> div {    line-height: 200%; } </style> </head> </head> <body> <h1>Demo Heading</h1> <div> <p>This is demo text.<br> This is another demo text. </p> </div> </body> </html>

ผลลัพธ์

ความแตกต่างของหน่วย (สำคัญ!)

ตัวอย่างปัญหา percentage/length

/* พ่อ font-size: 20px, line-height: 150% = 30px */
.parent { font-size: 20px; line-height: 150%; }
.child { font-size: 40px; } /* line-height ยังคง 30px! แคบเกินไป */

แนวทางปฏิบัติที่ดี

• ใช้ unitless number (เช่น 1.5, 1.6) สำหรับ body text
• ค่าทั่วไป: 1.5-1.7 สำหรับเนื้อหาอ่าน (readability)
• หัวข้อ (heading) ใช้ค่าน้อยกว่า: 1.2-1.3
• ตั้งค่าที่ body หรือ :root เพื่อสืบทอดให้ทั้งหน้า