Trong bài viết trước đây về 8 thuộc tính văn bản trong CSS tôi có đề cập đến word-spacing. Tuy nhiên bài đó chỉ là cái nhìn tổng quát. Hôm nay chúng ta sẽ đi vào chi tiết và các ví dụ cụ thể.
Thuộc tính word-spacing được dùng để điều khiển khoảng cách chữ với nhau.
Code mẫu
p
{
word-spacing:20px;
}Kết quả:
Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.Đặc điểm
- Giá trị mặc định: normal – giá trị này sẽ để khoảng cách chữ theo mặc định của font.
- Tính kế thừa: có kế thừa – tính kế thừa làm cho các thẻ con cháu tự động có cùng thuộc tính với thẻ cha. Nghĩa là thẻ cha có thuộc tính word-spacing như thế nào thì các thẻ con cháu cũng có thuộc tính word-spacing như thế.
- Phiên bản CSS: word-spacing thuộc về phiên bản CSS1
- Cú pháp trong JavaScript, thí dụ: object.style.wordSpacing=”7px”
- Hỗ trợ trình duyệt: được hỗ trợ bởi hầu hết các trình duyệt lớn gồm: FireFox, Google Chrome, Opera, Safari, IE.
Các giá trị
- normal: khoảng cách mặc định;
- độ dài: ngoài px các đơn vị pt, cm, em đều OK cả, các giá trị âm cũng được chấp thuận.
Thực hành
p {word-spacing: 5px;} Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.
p {word-spacing: 15px;} Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.
p {word-spacing: -5px;} Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.
p {word-spacing: 1em;} Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.
p {word-spacing: 0.5em;} Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.
p {word-spacing: 1cm;} Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.