คุณสมบัติ line-height

คุณสมบัติ line-height กำหนด ระยะห่างระหว่างบรรทัดของข้อความ (ระยะห่างระหว่างบรรทัด)

คุณสมบัตินี้ไม่ได้กำหนดช่องว่างระหว่างบรรทัดของข้อความ อย่างที่อาจเข้าใจผิด แต่กำหนด ความสูงของเส้นข้อความ ซึ่งหมายความว่า ช่องว่างจริงระหว่างบรรทัดจะถูก คำนวณดังนี้: line-height - font-size = ระยะห่างระหว่างบรรทัดของข้อความ หรือในทางกลับกัน line-height = font-size + ระยะห่าง ระหว่างบรรทัดของข้อความ

ไวยากรณ์

ตัวเลือก {
	line-height: ค่า;
}

ค่า

ค่าของคุณสมบัตินี้สามารถเป็น หน่วยสำหรับขนาด ใดก็ได้ เมื่อระบุค่าเป็น % ระยะห่างระหว่างบรรทัดจะเป็นเปอร์เซ็นต์ ของขนาดฟอนต์

นอกจากนี้ ยังสามารถกำหนดค่าเป็นตัวเลขใดก็ได้ ที่มากกว่าศูนย์ ในกรณีนี้จะถือเป็น ตัวคูณของขนาดฟอนต์ ตัวอย่างเช่น ถ้า font-size มีค่า 20px, และ line-height - 1.5, นี่ก็ เหมือนกับการเขียน line-height: 30px (20px * 1.5 = 30px)

ค่าเริ่มต้นของคุณสมบัติคือ normal, ในกรณีนี้เบราว์เซอร์จะเลือกระยะห่างระหว่างบรรทัด โดยอัตโนมัติ

ตัวอย่าง

ในตัวอย่างนี้ ระยะห่างระหว่างบรรทัด ของข้อความจะเป็น line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 35px;
	text-align: justify;
}

ตัวอย่าง

ลดช่องว่างลงเป็น 25px - 18px = 7px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 25px;
	text-align: justify;
}

ตัวอย่าง

ในตัวอย่างนี้ ระยะห่างระหว่างบรรทัด ของข้อความจะเป็น line-height - font-size = 18px - 18px = 0px - บรรทัดจะเกือบติดกัน (หางของ ตัวอักษรบรรทัดบนจะแตะหาง ของตัวอักษรรอบล่าง):

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 18px;
	text-align: justify;
}

ตัวอย่าง

ในตัวอย่างนี้ ค่า line-height - เป็นตัวคูณ 1.5 ของขนาดฟอนต์ ดังนั้น line-height จะเทียบเท่ากับ font-size * 1.5 = 18px * 1.5 = 27px และช่องว่างจริงระหว่าง บรรทัดจะเป็น line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 1.5;
	text-align: justify;
}

ตัวอย่าง

เพิ่มตัวคูณ:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 2.5;
	text-align: justify;
}

ตัวอย่าง

หากทำให้ line-height น้อยกว่า font-size, บรรทัดจะซ้อนทับกัน:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 13px;
	text-align: justify;
}