คุณสมบัติ CSS line-height กำหนดความสูงของบรรทัดขององค์ประกอบ HTML ต่างๆ มักใช้เพื่อกำหนดระยะห่างระหว่างบรรทัดข้อความ ความสูงของเส้นสามารถกำหนดได้โดยใช้คำหลัก เปอร์เซ็นต์ หรือค่าตัวเลข
คุณสมบัติ CSS line-height ช่วยให้นักพัฒนาสามารถกำหนดช่องว่างระหว่างสององค์ประกอบแบบอินไลน์บนหน้าเว็บ นักพัฒนามักใช้คุณสมบัติ CSS line-height เพื่อเพิ่มหรือลดระยะห่างระหว่างบรรทัดข้อความบนหน้าเว็บ
บทช่วยสอนนี้จะกล่าวถึงวิธีใช้คุณสมบัติ CSS line-height เราจะยกตัวอย่างเพื่อช่วยคุณในการเริ่มต้น เมื่ออ่านบทช่วยสอนนี้จบ คุณจะเป็นผู้เชี่ยวชาญในการใช้คุณสมบัติ line-height ในโค้ดของคุณ
ความสูงของบรรทัด CSS
คุณสมบัติ CSS line-height กำหนดความสูงของกล่องบรรทัด กล่องบรรทัดคือบรรทัดที่ประกอบเป็นกล่องใน CSS วิธีนี้มักใช้เพื่อกำหนดระยะห่างระหว่างบรรทัดข้อความ
การปรับความสูงของบรรทัดช่วยให้คุณปรับระยะห่างระหว่างบรรทัดข้อความ (หรือองค์ประกอบอื่นๆ) บนหน้าเว็บได้โดยอ้อม ซึ่งเหมือนกับการจัดรูปแบบข้อความใน Microsoft Word ให้เว้นวรรคสองครั้งหรือเว้นวรรค 1.15
ไวยากรณ์สำหรับคุณสมบัติ CSS line-height มีดังนี้:
line-height: lineHeight;
“lineHeight” หมายถึงค่าความยาวที่กำหนดความสูงของเส้นขององค์ประกอบ
ค่าสามประเภทที่คุณใช้กับคุณสมบัติ line-height ได้ ได้แก่ ความยาว ตัวเลข และเปอร์เซ็นต์:
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
| ค่า | คำอธิบาย | ค่าตัวอย่าง | ผลลัพธ์ของ ค่าตัวอย่าง |
| ความยาว | กำหนดความสูงของเส้นโดยใช้หน่วยวัดเฉพาะ (เช่น em, px และ cm) | 10px, 15px, 20px | หากคุณระบุ 10px ความสูงของเส้นจะเป็น 10px |
| หมายเลข | กำหนดความสูงของบรรทัดให้เท่ากับขนาดของฟอนต์หลายขนาด | 1, 1.8, 2 | หากขนาดแบบอักษรของคุณคือ 10px ความสูงของบรรทัดจะเป็น 10px, 18px และ 20px ตามลำดับ |
| เปอร์เซ็นต์ | กำหนดความสูงของเส้นเป็นเปอร์เซ็นต์ของขนาดตัวอักษรขององค์ประกอบ | 30% 50% 110% | หากขนาดแบบอักษรของคุณคือ 10px ความสูงของบรรทัดจะเป็น 3px, 5px และ 11px ตามลำดับ |
หรือคุณสามารถระบุคำหลัก "ปกติ" คำหลักนี้ระบุการใช้ค่าเริ่มต้นของเบราว์เซอร์ ค่านี้มักจะประมาณ 1.2 ขึ้นอยู่กับเบราว์เซอร์ที่ผู้ดูใช้
หากคุณนำคุณสมบัติ line-height ไปใช้กับกล่อง ข้อความทั้งหมดภายในกล่องนั้นจะใช้ความสูงของบรรทัดที่คุณระบุ
หมายเหตุเกี่ยวกับการเข้าถึง
การเปลี่ยนระยะห่างบรรทัดเป็นการใช้คุณสมบัติความสูงบรรทัดโดยทั่วไป เนื่องจากคุณต้องการให้แน่ใจว่ามีช่องว่างเพียงพอระหว่างบรรทัด หากมีช่องว่างระหว่างบรรทัดไม่เพียงพอ ข้อความอาจอ่านยาก
ข้อความที่อ่านยากมีผลกระทบร้ายแรงโดยเฉพาะกับผู้ที่มีความบกพร่องทางการมองเห็น การเข้าถึงควรคำนึงถึงเสมอเมื่อคุณสร้างเว็บไซต์
เมื่อคุณใช้ตัวเลขเพื่อกำหนดความสูงของบรรทัดขององค์ประกอบใน CSS คุณไม่ควรใช้ค่าใดๆ ที่ต่ำกว่า 1.5 เนื่องจากค่าความสูงของเส้นที่ต่ำกว่า 1.5 อาจทำให้ผู้อ่านที่มีความบกพร่องทางสายตาใช้งานเว็บไซต์ของคุณได้ยากขึ้น
ตัวอย่าง CSS ความสูงบรรทัด
สมมติว่าเรากำลังออกแบบหน้า "เกี่ยวกับเรา" สำหรับเว็บไซต์ของชมรมทำอาหารในท้องถิ่น หน้านี้มีหัวข้อตามด้วยข้อความย่อหน้าคำอธิบายของสโมสร
เราต้องการให้ข้อความของเรามีระยะห่างอย่างเหมาะสม ดังนั้นเราจึงตัดสินใจตั้งค่าความสูงของบรรทัดของย่อหน้าของข้อความบนหน้าเว็บเป็น 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;
}
รหัสของเราส่งคืน:
ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS
ในไฟล์ HTML ของเรา เราได้กำหนดส่วนหัว "เกี่ยวกับเรา" โดยใช้แท็ก
จากนั้น เราเขียนคำอธิบายของ Fantastic Chefs และใส่คำอธิบายนั้นไว้ในแท็ก HTML
ในไฟล์ CSS ของเรา เราได้กำหนดกฎไว้หนึ่งข้อ กฎของเราใช้คุณสมบัติ CSS สองรายการ เราตั้งค่าความสูงของบรรทัดเป็น 1.6rem และขนาดตัวอักษรเป็น 16px สำหรับแท็ก HTML
ทั้งหมด
หน่วยวัด "rem" ที่เราใช้กับคุณสมบัติ line-height กำหนดความสูงของเส้นที่สัมพันธ์กับขนาดตัวอักษรขององค์ประกอบรูท “rem” ย่อมาจาก “root element” ดังนั้น เนื่องจากขนาดตัวอักษรของเราคือ 16px ความสูงของบรรทัดสำหรับย่อหน้านี้คือ 25.6px (16px * 1.6)
ข้อความในย่อหน้าด้านบนมีระยะห่างเพียงพอและไม่ทับซ้อนกัน
นอกจากนี้เรายังสามารถใช้ line-height กับองค์ประกอบ
ของเราจะได้รับผลกระทบ
บทสรุป
คุณสมบัติ CSS line-height กำหนดความสูงของกล่องบรรทัด โดยปกติ คุณสมบัตินี้ใช้เพื่อกำหนดระยะห่างระหว่างบรรทัดของข้อความในย่อหน้าหรือหัวเรื่อง ความสูงของบรรทัดสามารถกำหนดได้โดยใช้คำหลักปกติ เปอร์เซ็นต์ ความยาว หรือค่าตัวเลข
บทช่วยสอนนี้กล่าวถึงพื้นฐานของคุณสมบัติ CSS line-height และวิธีใช้งานในโค้ดของคุณ ตอนนี้คุณมีความรู้ที่จำเป็นในการเริ่มใช้คุณสมบัติ CSS line-height อย่างผู้เชี่ยวชาญแล้ว!
คุณกำลังมองหาที่จะเป็นนักพัฒนาเว็บหรือไม่? ดูคู่มือ CSS วิธีเรียนรู้ของเราสำหรับเคล็ดลับและคำแนะนำจากผู้เชี่ยวชาญเกี่ยวกับแหล่งข้อมูลและหลักสูตรการเรียนรู้ชั้นนำ
