การเว้นระยะระหว่างบรรทัดใน CSS

ตอนนี้เรามาเรียนรู้การกำหนดระยะห่างระหว่างบรรทัด ของข้อความกัน โดยระยะห่างระหว่างบรรทัด หมายถึงระยะห่างระหว่างบรรทัด ของข้อความ ซึ่งก็คือช่องว่างระหว่างบรรทัดนั่นเอง สำหรับการทำสิ่งนี้มีคุณสมบัติ line-height, ซึ่งใช้กำหนดความสูงของบรรทัดข้อความ

เมื่อใช้คุณสมบัติ line-height คุณอาจพบกับความเข้าใจผิดบางอย่าง: คุณสมบัตินี้ ไม่ได้กำหนดระยะห่างระหว่างบรรทัดข้อความ อย่างที่อาจจะดูเหมือน แต่เป็นการกำหนดความสูง ของบรรทัดข้อความ

ซึ่งหมายความว่าระยะห่างที่มองเห็นได้จริง ระหว่างบรรทัดจะถูกคำนวณดังนี้: line-height - font-size = ระยะห่างที่มองเห็นได้ระหว่าง บรรทัดของข้อความ

ในตัวอย่างถัดไป ระยะห่างระหว่างบรรทัด ของข้อความจะเป็น 50px - 20px = 30px:

<p>
	some long text
</p>

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

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