การตั้งค่าความสูงบรรทัดใน CSS

ความสูงของบรรทัดสามารถกำหนดได้โดยคุณสมบัติ line-height ใน CSS รับค่าบวกเท่านั้น

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ CSS line-height ดังนี้:

Selector {    line-height: /*value*/ }

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS line-height:

<!DOCTYPE html> <html> <head> <style> div * {    margin: 1.5em;    box-shadow: -13px -10px 10px 1px crimson; } #demo {    line-height: 60%; } p {    box-shadow: 13px -10px 10px 1px grey;    line-height: 50px; } </style> </head> <body> <h2>หัวข้อสาธิต</h2> <div> <p>This is demo text one.</p> <div>This is demo text two.</div> <div id="demo">This is demo text three.</div> </div> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้:

ตัวอย่างเพิ่มเติม

<!DOCTYPE html> <html> <head> <style> div * {    margin: auto;    padding: 3em; } p {    height: 100px;    width: 100px;    border: thin solid;    border-radius: 50%;    box-shadow: 0 20px 10px 1px grey;    line-height: 0.6; } </style> </head> <body> <h2>C# คืออะไร?</h2> <div> <p>C# เป็นภาษาที่มีการกำหนดชนิดข้อมูลเข้มงวด (strongly-typed) ทุกตัวแปรและค่าคงที่มีชนิดข้อมูล เช่นเดียวกับทุกนิพจน์ที่ประเมินผลเป็นค่า</p> </div> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้: