การตั้งค่าช่องว่างระหว่างตัวอักษรด้วย CSS letter-spacing

ด้วยคุณสมบัติ letter-spacing ใน CSS เราสามารถระบุปริมาณช่องว่างระหว่างตัวอักษรของข้อความได้

ตัวอย่างที่ 1: การขยายตัวอักษร

<!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>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

ตัวอย่างที่ 2: การใช้กับ flex container

<!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>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้: