تعیین میزان ایندنت متن در CSS – ویژگی text-indent

گاهی اوقات خط اول پاراگراف ها در صفحات وب و … با کمی فاصله بیشتر نمایان می‌شوند. ویژگی text-indent در CSS میزان و نحوه ایجاد ایندنت (دندانه یا فاصله قبل از خطوط) متن را مشخص می‌کند. معمولا از این ویژگی برای تعیین ایندنت خط اول پاراگراف ها استفاده می‌شود.

نحوه تعیین میزان ایندنت متن یا فاصله از ابتدای خط در CSS

برای تعیین میزان ایندنت یا فاصله قبل از خطوط متن، می‌توانید در سی‌اس‌اس مقدار ویژگی text-indent را مشابه با نمونه زیر مشخص کنید.

p {
  text-indent: 30px;
}

کد CSS فوق باعث می‌شود خط اول پاراگراف ها به اندازه 30 پیکسل از ابتدای خط فاصله بگیرد. تصویر زیر نمونه اعمال این قانون روی یک پاراگراف نمونه را نمایش می‌دهد.

همانطور که در تصویر بالا مشاهده می‌کنید برای متون چپ به راست (مانند متون انگلیسی)، با ایجاد indent خط اول متن به سمت راست منتقل می‌شود و به شکل مشابه برای متون راست به چپ (مانند متون فارسی) نیز خط اول متن به سمت چپ منتقل می‌شود.

مقادیر ویژگی text-indent می‌توانند با واحدهای طول مانند px, cm, pt, em و … میزان ایندنت را مشخص کنند. علاوه بر این می‌توان میزان ایندنت را مشابه با مثال زیر براساس درصد عرض (یا Width) المان والد مشخص کرد.

p {
  text-indent: 20%;
}

نکته: استفاده از مقدار منفی نیز برای ویژگی text-indent امکان‌پذیر است. مقادیر منفی باعث می‌شوند فاصله متن از ابتدای خط به صورت معکوس تغییر کند. برای مثال در زبان‌های چپ به راست با مقادیر منفی، متن به سمت چپ ایندنت داده می‌شود. در ادامه نمونه‌ای از مقادیر منفی برای ویژگی text-indent و نتیجه آن را مشاهده می‌کنید. در این مثال خط اول پاراگراف به سمت چپ ایندنت می‌شود و مابقی خطوط سر جای خود باقی می‌مانند.

p {
  text-indent: -30px;
}

بازگشت به فهرست مجموعه آموزشی CSS