ระยะห่างตัวอักษรใน CSS

ระยะห่างระหว่างตัวอักษรสามารถปรับได้โดยใช้คุณสมบัติ letter-spacing ใน CSS ไวยากรณ์ของคุณสมบัติ CSS letter-spacing ดังนี้:

ไวยากรณ์

Selector {    letter-spacing: /*value*/ }

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

ตัวอย่าง

<!DOCTYPE html> <html> <head> <style> div {    box-shadow: 0 -10px 0 1px lightpink; } li {    letter-spacing: 5px;    line-height: 1.2em; } </style> </head> <body> <h2>หัวข้อสาธิต</h2> <div> <ol> <li>This is demo text!</li> <li>This is it!</li> <li>This is another demo text!</li> </ol> </div> </body> </html>

ผลลัพธ์

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

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

<!DOCTYPE html> <html> <head> <style> dt {    font-size: 20px;    letter-spacing: -2px;    word-spacing: 1em;    color: white;    font-style: italic;    background-color: cadetblue; } dd {    letter-spacing: 2pt; } </style> </head> <body> <h2>ภาษาโปรแกรมและฐานข้อมูล</h2> <dl> <dt>Java</dt> <dd>ภาษาโปรแกรมมิ่งที่พัฒนาโดย James Gosling.</dd> <dt>C++</dt>> <dd>ภาษาโปรแกรมมิ่งที่พัฒนาโดย Bjarne Stroustrup.</dd> <dt>MySQL</dt> <dd>MySQL เป็นระบบจัดการฐานข้อมูลเชิงสัมพันธ์โอเพนซอร์ส</dd>>> </body> </html>

ผลลัพธ์

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