Tidadigi Logo

CSS letter-spacing Property

Thuộc tính `letter-spacing` trong CSS dùng để điều chỉnh khoảng cách giữa các ký tự. Nó giúp kiểm soát khoảng cách để tăng hoặc giảm cho dễ đọc hơn. Bạn có thể tạo hiệu ứng hình ảnh cụ thể. Thuộc tính này đặc biệt hữu ích khi tinh chỉnh tiêu đề hoặc đoạn văn.

Cú pháp

letter-spacing: normal | length | initial | inherit;

Giá trị thuộc tính

Thuộc tínhMô tảVí dụ
letter-spacingĐiều chỉnh khoảng cách giữa các ký tự trong văn bản.letter-spacing: 2px;
normalÁp dụng khoảng cách mặc định cho font hiện tại, không thêm khoảng trắng.letter-spacing: normal;
lengthThêm hoặc bớt khoảng trắng giữa các ký tự bằng độ dài chỉ định. Giá trị này có thể dương hoặc âm.letter-spacing: 1em;
initialĐặt lại thuộc tính về giá trị mặc định của nó (normal).letter-spacing: initial;
inheritKế thừa giá trị letter-spacing từ phần tử cha.letter-spacing: inherit;
Giá trị dươngTăng khoảng cách giữa các ký tự.letter-spacing: 3px;
Giá trị âmGiảm khoảng cách giữa các ký tự, kéo chúng lại gần nhau hơn.letter-spacing: -1px;

Ví dụ về thuộc tính letter-spacing trong CSS

Dưới đây là một số ví dụ về thuộc tính `letter-spacing` trong CSS.

Ví dụ 1: Sử dụng letter-spacing với giá trị normal

Trong ví dụ này, ta áp dụng `letter-spacing: normal;` cho đoạn văn. Điều này nghĩa là văn bản sẽ dùng khoảng cách mặc định của font. Không có thêm khoảng trắng nào được thêm vào giữa các ký tự. Trang này cũng có văn bản căn giữa với tiêu đề màu xanh lá cây.

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS letter-spacing Property</title>
    <style>
        p {
            letter-spacing: normal;
        }
    </style>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h2>
        CSS letter-spacing Property
    </h2>

    <p>
        This paragraph has letter-spacing: normal;
    </p>
</body>

</html>

Đầu ra: css-letter-spacing-property

Ví dụ 2: Kéo giãn văn bản

Trong ví dụ này, ta áp dụng thuộc tính `letter-spacing: 5px;` cho đoạn văn. Nó làm tăng khoảng cách giữa các ký tự thêm 5 pixel. Văn bản sẽ xuất hiện cách xa nhau hơn. Nó tạo ra một khoảng cách rộng hơn giữa mỗi ký tự. Văn bản cũng được căn giữa với tiêu đề màu xanh lá cây.

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS letter-spacing Property</title>
    <style>
        p {
            letter-spacing: 5px;

        }
    </style>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h2>
        CSS letter-spacing Property
    </h2>

    <p>
        This paragraph has letter-spacing: 5px;
    </p>
</body>

</html>

Đầu ra: 

css-letter-spacing-property

Trình duyệt được hỗ trợ

Các trình duyệt được hỗ trợ bởi thuộc tính `letter-spacing` được liệt kê dưới đây:


Last Updated : 21/07/2025