Thiết lập kích thước Tab trong HTML với thuộc tính CSS tab-size

Giới thiệu

Thuộc tính tab-size trong CSS cho phép chúng ta thiết lập lượng khoảng trắng được sử dụng trong tab. Các ví dụ sau minh họa thuộc tính tab-size.

Ví dụ 1: tab-size cơ bản

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

Kết quả

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

Ví dụ 2: tab-size với pre

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

Kết quả

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