Khoảng cách giữa các chữ cái có thể được điều chỉnh bằng thuộc tính letter-spacing trong CSS.
Cú pháp
Selector { letter-spacing: /*giá trị*/ }
Các ví dụ sau minh họa thuộc tính CSS letter-spacing:
Ví dụ
<!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>Tiêu đề Demo</h2> <div> <ol> <li>Đây là văn bản demo!</li> <li>Đây là nó!</li> <li>Đây là văn bản demo khác!</li> </ol> </div> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!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>Ngôn ngữ lập trình và Cơ sở dữ liệu</h2> <dl> <dt>Java</dt> <dd>Ngôn ngữ lập trình do James Gosling phát triển.</dd> <dt>C++</dt> <dd>Ngôn ngữ lập trình do Bjarne Stroustrup phát triển.</dd> <dt>MySQL</dt> <dd>MySQL là hệ thống quản lý cơ sở dữ liệu quan hệ mã nguồn mở.</dd> </dl> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
