text-indent

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

اگر جهت عنصر از راست به چپ باشد (direction: rtl;) فضای خالی بین محتوا و لبه سمت راست بوجود می آید و اگر جهت از چپ به راست باشد محتوا از لبه سمت چپ فاصله می گیرد.

این ویژگی مقادیرطولی مثبت و منفی و همینطور درصدی را می پذیرد:

text-indent: 20px;
text-indent: 3em;
text-indent: 10%; /* ده درصد از عرض عنصر */
text-indent: -1rem;
text-indent: inherit;
text-indent: initial; /* == 0 مقدار اولیه */

برای خوانایی یک متن بهتر است که پاراگراف های پشت سر هم دارای کمی تو رفتگی در خط اول باشند (به غیر از پاراگراف اول). که این کار در سی اس اس با استفاده از انتخابگرها بسیار ساده است:

p {
  margin-bottom: 0;
}

p + p {
  text-indent: 1.5em;
  margin-top: 0;
}

مقدار این ویژگی Cascade می شود پس در نتیجه فرزندان نوع بلاک آن نیز همین مقدار فضای افقی را در خط اولشان خواهند داشت. پس بهتر است اگر نمی خواهیم چنین اتفاقی بیافتد مقدار این ویژگی را برای فرزندان آن برابر با صفر قرار دهیم.

دموی زیر را بررسی کنید:

See the Pen text-indent by Mojtaba Seyedi (@seyedi) on CodePen.