ความหมายของ 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 ด้วยวิธีนี้คือเมื่อขนาดฟอนต์เปลี่ยนไป ระยะห่างระหว่างบรรทัดก็จะเปลี่ยนไปโดยอัตโนมัติ

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

html<p>
  some long text
</p>

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

Результат: