การตั้งค่าขนาดแท็บใน HTML ด้วยคุณสมบัติ tab-size ใน CSS

คุณสมบัติ tab-size ใน CSS ช่วยให้เราตั้งค่าปริมาณช่องว่างที่ใช้ในแท็บได้ ตัวอย่างต่อไปนี้แสดงการใช้งานคุณสมบัติ tab-size

ตัวอย่างที่ 1: การเปรียบเทียบขนาดแท็บ

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
  display: flex; 
  flex-direction: column; 
} 
p { 
  white-space: pre; 
} 
p:last-of-type { 
  tab-size: 32; 
  -moz-tab-size: 32; 
} 
</style> 
</head> 
<body> 
<p> Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p> 
<p> Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p> 
</body> 
</html>

ผลลัพธ์

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

ตัวอย่างที่ 2: การใช้งานกับ pre tag

<!DOCTYPE html> 
<html> 
<head> 
<style> 
pre { 
  margin: 2%; 
  box-shadow: inset 0 0 12px lime; 
} 
p { 
  background: lavender; 
  tab-size: 1; 
  -moz-tab-size: 1; 
} 
</style> 
</head> 
<body> 
<pre> 4 tabs of size 1 paragraph .|.|.|. <p> Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus. </p> </pre> 
</body> 
</html>

ผลลัพธ์

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