آموزش اسکرچ به صورت آنلاین

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

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

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

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

p {
  text-indent: 30px;
}

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

تعیین ایندنت متن یا فاصله قبل از خط اول پاراگراف در CSS با کمک ویژگی text-indent

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

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

p {
  text-indent: 20%;
}

تعیین ایندنت متن یا فاصله قبل از خط اول پاراگراف در CSS با کمک مقدار درصدی در ویژگی text-indent

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

p {
  text-indent: -30px;
}

ایندنت منفی خط اول پاراگراف در CSS

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

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *