text-indent คือคำสั่งของ CSS ใช้สำหรับกำหนดการย่อหน้า หรือการเยื้องของข้อความ บทความนี้สอนการใช้คำสั่ง text-indent ทั้งแบบเขียน inline CSS และแบบเขียน CSS แยกและเรียกใช้งาน โดยทั้ง 2 วิธีได้ผลลัพธ์ที่เหมือนกัน คือการย่อหน้า หรือเยื้องข้อวามที่ต้องการ
ตัวอย่าง การใช้ text-indent แบบ inline CSS
<div style="text-indent: 1rem"></div>
จากตัวอย่างเป็นการย่อหน้า หรือเยื้องข้อความจากซ้ายไปขวา ความกว้าง 1rem โดยใช้คำสั่ง text-indent ในรูปแบบ inline CSS ในแท็ก div ของ HTML
ตัวอย่าง การใช้ text-indent แบบเขียน CSS แยก
<style>
.content {
text-indent: 20px;
}
</style>
<div class="content"></div>
จากตัวอย่างเขียน CSS แยกโดยสร้าง class ชื่อ .content เรียกใช้คำสั่ง text-indent กำหนดค่าการย่อหน้า หรือเยื้องข้อความจากซ้ายไปขวา ความกว้างเท่ากับ 20px จากนั้นนำ class content ไปใช้กับ div ที่มีข้อความที่ต้องการย่อหน้า
สรุป text-indent เป็นคำสั่งของ CSS ที่มีประโยชน์อย่างมากสำหรับการย่อหน้า หรือเยื้องข้อความที่ต้องการ โดยคำสั่ง text-indent สามารถเรียกใช้ได้ทั้งแบบ inline CSS และแบบเขียน CSS แยก และเรียกใช้ใน HTML ในส่วนของข้อมูลที่ต้องการ