Thiết lập khoảng cách giữa các chữ cái với CSS letter-spacing

Giới thiệu

Sử dụng thuộc tính letter-spacing trong CSS, chúng ta có thể chỉ định lượng khoảng cách giữa các chữ cái của văn bản.

Ví dụ 1: letter-spacing lớn

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p:first-of-type { 
  margin: 3%; 
  padding: 3%; 
  background-color: seagreen; 
  color: white; 
  letter-spacing: 2em; 
  font-size: 2em; 
  text-align: center; 
} 
</style> 
</head> 
<body> 
<p>BOOM</p> 
<p>BOOM</p> 
</body> 
</html>

Kết quả

Đoạn mã trên sẽ cho kết quả sau:

Ví dụ 2: letter-spacing với flex

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
  display: flex; 
  margin: 3%; 
  padding: 3%; 
  border: 23px ridge navy; 
} 
p { 
  margin: 3%; 
  background-color: navajowhite; 
  letter-spacing: 12px; 
  font-size: 1.2em; 
  text-align: center; 
} 
</style> 
</head> 
<body> 
<div> 
<p>BOOM</p> 
<p>abcdefghijklmnop-qrstuvwxyz</p> 
</div> 
</body> 
</html>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: