Tạo khoảng cách giữa các ký tự trong CSS với thuộc tính letter-spacing

vi du ve co gian khoang cach ky tu trong CSS voi thuoc tinh letter-spacing

Ví dụ về co giãn khoảng cách giữa các ký tự trong CSS với thuộc tính letter-spacing

Với CSS, nếu bạn muốn khoảng cách giữa các các ký tự cách xa ra hoặc gần lại trong cùng một từ thì sử dụng thuộc tính letter-spacing. Cũng có thể gọi nó là co giãn khoảng cách giữa các ký tự (các chữ cái) trong một từ.

Còn để tạo khoảng cách giữa các từ trong một câu hay đoạn văn bạn sử dụng thuộc tính word-spacing nhé !

CSS của thuộc tính letter-spacing có dạng

Đối tượng thường ứng dụng thuộc tính này là LOGO, slogan, hoặc một đoạn chữ mà bạn muốn nó nổi bật so với phần còn lại.

.ten-doi-tuong {
letter-spacing: 5px;
}

Thực hành thuộc tính letter-spacing

Bạn xem minh họa dưới đây và nhấn vào icon CodePen để vào trực tiếp giao diện thực hành nhé !

See the Pen
Thuộc tính letter-spacing
by Hocban.vn (@hocbanvn)
on CodePen.


Như vậy là xong rồi đó, giờ bạn có thể ứng dụng nó trong việc tùy biến độ co giãn ký tự trong CSS dễ dàng rồi.

guest
7 Comments
Inline Feedbacks
View all comments
Minh Trinh <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">7</span><span style="color: #2196f3;">) </span>
Guest

Mình test cái edit bình luận tí nha 🙁
wpdiscuz bên mình nó lỗi quá.

Minh Trinh <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">7</span><span style="color: #2196f3;">) </span>
Guest
Đã trả lời  Minh Trinh (7)

Sao bên bác nó cũng thế nhỉ :3 Comment đầu tiên bấm Edit nó cứ nhảy nhảy khó chịu ghê 😀

Minh Trinh <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">7</span><span style="color: #2196f3;">) </span>
Guest
Đã trả lời  Tịnh Nguyễn (2,853)

Bác vào bài nào chưa có bình luận ấy, bác comment xong bấm Edit nó nhảy nhảy cái khung.
Phần này nècomment image

Last edited 11 days ago by Minh Trinh
Minh Trinh <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">7</span><span style="color: #2196f3;">) </span>
Guest
Đã trả lời  Tịnh Nguyễn (2,853)

Safari, Firefox cũng bị ah. Với bác cho hỏi tắt cái Đăng ký này chỗ nào nhỉ.
Với lại khung comment mTZiH0F.png của mình nó bị to quá 🙁