Khoảng cách từ (Word Spacing) bằng CSS

Để thiết lập khoảng cách giữa các từ, sử dụng thuộc tính word-spacing.

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

Ví dụ 1: normal vs 10px

<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 { word-spacing: normal; }
p.demo2 { word-spacing: 10px; }
</style>
</head>
<body>
<h1>Tiêu đề Demo</h1>
<h2>Tiêu đề 2</h2>
<p class="demo1">Đây là văn bản demo.</p>
<h2>Tiêu đề 2</h2>
<p class="demo2">Đây là văn bản demo.</p>
</body>
</html>

Kết quả

Ví dụ 2: 3cm vs 40px

<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 { word-spacing: 3cm; }
p.demo2 { word-spacing: 40px; }
</style>
</head>
<body>
<h1>Tiêu đề Demo</h1>
<h2>Tiêu đề 2</h2>
<p class="demo1">Đây là văn bản demo.</p>
<h2>Tiêu đề 2</h2>
<p class="demo2">Đây là văn bản demo.</p>
</body>
</html>

Kết quả

Lưu ý:

• normal: Khoảng cách mặc định của font (thường ~0.25em)
• Giá trị dương: Giãn cách từ
• Giá trị âm: Thu hẹp cách từ (có thể gây chồng chéo)
• Khác với letter-spacing (khoảng cách chữ cái)
• Hữu ích cho thiết kế typography, hiệu ứng nghệ thuật