CSS Text Spacing

Giãn cách văn bản

Trong chương này chúng ta sẽ tìm hiểu về các thuộc tính sau:

1. text-indent
2. letter-spacing
3. line-height
4. word-spacing
5. white-space

Thụt đầu dòng văn bản

Thuộc tính text-indent được sử dụng để chỉ định sự thụt vào của dòng đầu tiên của một đoạn văn bản:

Ví dụ:

p {
    text-indent: 50px;
}

Khoảng cách giữa các chữ cái

Thuộc tính letter-spacing được sử dụng để chỉ định khoảng trống giữa các ký tự trong một đoạn văn bản.

Ví dụ sau sẽ giải thích cách tăng hoặc giảm bớt khoảng trống giữa các ký tự:

h1 {
    letter-spacing: 5px;
}

h2 {
    letter-spacing: -2px;
}

Chiều cao của dòng

Thuộc tính line-height được sử dụng để chỉ định khoảng trống giữa các dòng:

Ví dụ:

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}

Khoảng cách giữa các từ

Thuộc tính word-spacing được sử dụng để chỉ định khoảng trống giữa các từ trong một đoạn văn bản.

Ví dụ sau sẽ giải thích cách tăng hoặc giảm bớt khoảng trống giữa các từ:

p.one {
    word-spacing: 10px;
}

p.two {
    word-spacing: -2px;
}

Khoảng trắng

Thuộc tính white-space được sử dụng để chỉ định cách khoảng trắng ở bên trong một phần tử được xử lý.

Ví dụ sau sẽ giải thích cách vô hiệu hóa vật bao bọc quanh đoạn văn bản ở bên trong một phần tử:

p {
    white-space: nowrap;
}

Các thuộc tính giãn cách văn bản 

1. letter-spacing: Chỉ định khoảng trống giữa các ký tự trong một đoạn văn bản.
2. line-height: Chỉ định chiều cao của dòng.
3. text-indent: Chỉ định sự thụt vào của dòng đầu tiên của một khối văn bản.
4. white-space: Chỉ định cách xử lý khoảng trắng ở bên trong một phần tử.
5. word-spacing: Chỉ định khoảng trống giữa các từ trong một đoạn văn bản.