CSS Line Height: คู่มือการตั้งค่าความสูงบรรทัด

CSS line-height property กำหนด line height ของ HTML elements ต่างๆ ใช้ทั่วไปสำหรับตั้งค่าระยะห่างระหว่างบรรทัดของข้อความ Line height ตั้งค่าได้ด้วย keywords, percentages, หรือ numerical values

CSS line-height property ให้ developers กำหนด space ระหว่าง inline elements สองตัวบน web page บ่อยครั้งใช้เพิ่ม/ลดระยะห่างระหว่างบรรทัดของข้อความ

บทเรียนอภิปรายการใช้ CSS line-height property พร้อมตัวอย่าง จบแล้วคุณจะ master การใช้ line-height property ในโค้ด

CSS line-height

CSS line-height property ตั้งค่าความสูงของ line box Line boxes คือบรรทัดที่รวมเป็น box ใน CSS method นี้ใช้ตั้งค่าระยะห่างระหว่างบรรทัดของข้อความ

การปรับ line height ให้ปรับ spacing ระหว่างบรรทัดของ text (หรือ elements อื่นๆ) ได้โดยอ้อม คล้าย format text ใน Microsoft Word ให้ double spaced หรือ 1.15 spaced

Syntax ของ CSS line-height property:

line-height: lineHeight;

"lineHeight" = length value ตั้งค่า line height ของ element

3 ประเภทค่าที่ใช้กับ line-height property ได้แก่ length, number, percentage:

Value	Description	Example Values	ผลลัพธ์ของ Example Values
Length	ตั้ง line height ด้วยหน่วยวัดเฉพาะ (em, px, cm)	10px, 15px, 20px	ระบุ 10px line height จะเป็น 10px
Number	ตั้ง line height = multiple ของ font size	1, 1.8, 2	ถ้า font size 10px line height จะเป็น 10px, 18px, 20px ตามลำดับ
Percentage	ตั้ง line height เป็น percentage ของ font size ของ element	30%, 50%, 110%	ถ้า font size 10px line height จะเป็น 3px, 5px, 11px ตามลำดับ

ทางเลือก: ระบุ keyword "normal" ใช้ browser default ค่าประมาณ 1.2 ขึ้นอยู่กับ browser

ถ้าใช้ line-height property กับ box ข้อความทั้งหมดใน box จะใช้ line height ที่ระบุ

หมายเหตุเรื่อง Accessibility

การเปลี่ยน line spacing เป็นการใช้ line-height property บ่อย เพราะต้องมั่นใจว่ามีพื้นที่เพียงพอระหว่างบรรทัด ถ้าพื้นที่ไม่พอ text อาจอ่านยาก

Text ที่อ่านยากมีผลร้ายต่อผู้มี visual impairments โดยเฉพาะ Accessibility ควรคำนึงถึงตอนสร้างเว็บไซต์

ตอนใช้ number ตั้ง line height ใน CSS ไม่ควรใช้ค่าต่ำกว่า 1.5 เพราะค่าต่ำกว่า 1.5 ทำให้ visually-impaired readers ใช้เว็บยากขึ้น

line-height CSS Example

สมมติ design "About Us" page สำหรับ cooking club ท้องถิ่น Page มี heading ตามด้วย paragraph อธิบาย club

ต้องการ text spaced out อย่างเหมาะสม ตัดสินใจตั้ง line height ของ paragraph เป็น 1.6rem โค้ด:

<html> <h2>About Us</h2> <p>Fantastic Chefs, founded in 2007, is a cooking club local to Seattle, WA. Our cooking club meets on a weekly basis to share recipes, discuss cooking techniques, and make food together. Every Saturday afternoon, our members gather at our Seattle-based kitchen.</p> <style> p { font-size: 16px; line-height: 1.6rem; }

โค้ดคืนค่า: CSS Line Height: คู่มือการตั้งค่าความสูงบรรทัด กดปุ่มใน code editor ด้านบนเพื่อดู output

ใน HTML กำหนด "About Us" header ด้วย

tag เขียนคำอธิบาย Fantastic Chefs ล้อมด้วย
tags

ใน CSS กำหนด 1 rule ใช้ 2 CSS properties ตั้ง line height = 1.6rem และ font size = 16px สำหรับทุก
HTML tags

หน่วย "rem" ที่ใช้กับ line-height ตั้ง line height relative to font-size ของ root element "rem" = "root element" ดังนั้น font size 16px line height = 25.6px (16px * 1.6)

ข้อความใน paragraph spaced out อย่างเพียงพอ ไม่ overlap

อาจใช้ line-height กับ
element ในตัวอย่างข้างต้นได้ ทำให้ text ทั้งหมดใน
ใช้ line height ที่ระบุ ทั้ง title และ
tag ได้รับผล

สรุป

CSS line-height property ตั้งค่าความสูงของ line box ปกติใช้ตั้งค่าระยะห่างระหว่างบรรทัดของข้อความใน paragraph หรือ heading line-height ตั้งค่าได้ด้วย normal keyword, percentage, length, หรือ numerical value

บทเรียนอภิปรายพื้นฐาน CSS line-height property และการใช้งาน ตอนนี้คุณมีความรู้ใช้ CSS line-height property เหมือน expert!

มองหาเป็น web developer? ดู How to Learn CSS guide มี expert tips และ top learning resources, courses