Thực hành thuộc tính word-spacing trong CSS

word-spacing: 1em

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.

Leave a Comment