Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

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


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

ตัวอย่าง

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

ผลลัพธ์

สิ่งนี้จะทำให้เกิดผลลัพธ์ดังต่อไปนี้ -

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

ตัวอย่าง

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

ผลลัพธ์

สิ่งนี้จะทำให้เกิดผลลัพธ์ดังต่อไปนี้ -

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