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

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

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

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

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

html<p>
  some long text
</p>

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

Результат: