ความหมายของ line-height ที่ไม่มีหน่วยใน CSS

ค่าของคุณสมบัติ line-height ไม่จำเป็นต้องเป็นตัวเลขที่มีหน่วยเสมอไป สามารถเขียนเป็นเพียงตัวเลขหรือเศษส่วนได้ ในกรณีนี้ค่าจริงของ line-height สามารถหาได้โดยการคูณมันด้วยค่าของ font-size

ตัวอย่างเช่น font-size เท่ากับ 10px และ line-height เท่ากับ 1.5 ในกรณีนี้ค่าจริงของ line-height จะเป็น 10px * 1.5 = 15px และช่องว่างสีข่างที่มองเห็นระหว่างบรรทัดของข้อความจะเท่ากับ 5px: 15px - 10px = 5px

ข้อดีของการกำหนด line-height ด้วยวิธีนี้คือเมื่อขนาดฟอนต์เปลี่ยนไป ระยะห่างระหว่างบรรทัดก็จะเปลี่ยนไปโดยอัตโนมัติ

มาดูการประยุกต์ใช้ดังที่ได้อธิบายไว้จากตัวอย่าง:

<p>
	some long text
</p>

p {
	font-size: 20px;
	line-height: 1.5;
	text-align: justify;
	width: 400px;
}

ให้ขนาดฟอนต์สำหรับย่อหน้าเท่ากับ 30px กำหนดคุณสมบัติ line-height เพื่อให้ช่องว่างสีขาวที่มองเห็นระหว่างย่อหน้าเท่ากับ 15px โดยใช้ค่าของ line-height ที่ไม่มีหน่วย