5.1 Thuộc tính line-height
Các thông số văn bản như line-height, letter-spacing và word-spacing đóng vai trò quan trọng trong việc định dạng văn bản trên các trang web. Chúng cho phép điều khiển khoảng cách giữa các dòng, khoảng cách giữa các chữ cái và khoảng cách giữa các từ tương ứng. Hãy xem xét từng thuộc tính này một cách chi tiết.
Thuộc tính line-height xác định chiều cao của dòng văn bản. Nó đặt khoảng cách giữa các dòng cơ sở của các dòng văn bản liền kề, ảnh hưởng đến độ dày và tính dễ đọc của văn bản.
Giá trị:
- Giá trị số: giá trị tương đối không có đơn vị (ví dụ: 1.5), được nhân với kích thước chữ hiện tại
- Giá trị phần trăm: giá trị tương đối tính bằng phần trăm so với kích thước chữ hiện tại (ví dụ: 150%)
- Giá trị tuyệt đối: giá trị trong các đơn vị cố định (ví dụ: pixels) (ví dụ: 24px)
- Từ khóa
normal: giá trị mặc định, thường bằng 1.2
Ví dụ sử dụng:
.normal {
line-height: normal;
}
.one-point-five {
line-height: 1.5;
}
.double {
line-height: 2;
}
<body>
<p class="normal">Đây là văn bản có chiều cao dòng bình thường. Đây là văn bản có chiều cao dòng bình thường.</p>
<p class="one-point-five">Đây là văn bản có chiều cao dòng 1.5. Đây là văn bản có chiều cao dòng 1.5.</p>
<p class="double">Đây là văn bản có chiều cao dòng gấp đôi. Đây là văn bản có chiều cao dòng gấp đôi.</p>
</body>
5.2 Thuộc tính letter-spacing
Thuộc tính letter-spacing xác định khoảng cách giữa các chữ cái, tức là khoảng trống bổ sung giữa các ký tự văn bản. Nó có thể được sử dụng để cải thiện tính dễ đọc hoặc tạo hiệu ứng hình ảnh.
Giá trị:
- Giá trị tuyệt đối: giá trị trong các đơn vị cố định (ví dụ: pixels — 2px)
- Giá trị âm: giảm khoảng cách giữa các ký tự (ví dụ: -1px)
- Từ khóa
normal: giá trị mặc định, bằng 0 (không có khoảng trống bổ sung)
Ví dụ sử dụng:
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 2px;
}
.narrow {
letter-spacing: -1px;
}
<body>
<p class="normal">Đây là văn bản có khoảng cách giữa các chữ cái bình thường.</p>
<p class="wide">Đây là văn bản có khoảng cách giữa các chữ cái rộng hơn.</p>
<p class="narrow">Đây là văn bản có khoảng cách giữa các chữ cái hẹp hơn.</p>
</body>
5.3 Thuộc tính word-spacing
Thuộc tính word-spacing xác định khoảng cách giữa các từ trong văn bản. Nó thêm hoặc bớt khoảng trống giữa các từ, có thể được sử dụng để cải thiện tính dễ đọc hoặc tạo hiệu ứng hình ảnh.
Giá trị:
- Giá trị tuyệt đối: giá trị trong các đơn vị cố định (ví dụ: pixels) (ví dụ: 4px)
- Giá trị âm: giảm khoảng cách giữa các từ (ví dụ: -2px)
- Từ khóa
normal: giá trị mặc định, bằng khoảng cách giữa các từ tiêu chuẩn (thường là 0)
Ví dụ sử dụng:
.normal {
word-spacing: normal;
}
.wide {
word-spacing: 4px;
}
.narrow {
word-spacing: -2px;
}
<body>
<p class="normal">Đây là văn bản có khoảng cách giữa các từ bình thường.</p>
<p class="wide">Đây là văn bản có khoảng cách giữa các từ rộng hơn.</p>
<p class="narrow">Đây là văn bản có khoảng cách giữa các từ hẹp hơn.</p>
</body>
GO TO FULL VERSION