عرض مصدر CSS/text-indent

<noinclude>{{DISPLAYTITLE:الخاصية <code>text-indent</code>}}</noinclude>
الخاصية <code>text-indent</code> في CSS تُحدِّد مقدار المسافة البادئة التي توضع قبل أسطر النص الموجودة في عنصر كتلي؛ وهذه الخاصية تتحكم بالمسافة البادئة لأوّل سطر افتراضيًا، لكن يمكن استخدام الكلمتين المحجوزتين <code>hanging</code> و <code>each-line</code> لتغيير هذا السلوك (انظر «<nowiki/>[[#دعم المتصفحات|دعم المتصفحات]]»).<nowiki/><syntaxhighlight lang="css">
/* <length> أطوال */
text-indent: 3mm;
text-indent: 40px;

/* <percentage> نسبة مئوية*/
text-indent: 15%;

/* قيم عامة */
text-indent: inherit;
text-indent: initial;
text-indent: unset;
</syntaxhighlight>تبدأ هذه المسافة من الحافة اليسرى لصندوق المحتوى (content box) للعنصر الكتلي الحاوي على العنصر الحالي، وذلك إذا كان اتجاه العنصر من اليسار إلى اليمين. أما إذا كانت من اليمين إلى اليسار فستكون هذه المسافة من الحافة اليمنى.
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>0</code>
|-
! scope="row" |تُطبَّق على
|العناصر الكتلية.
|-
! scope="row" |قابلة للوراثة
|نعم
|-
!قابلة للتحريك
|نعم
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدت.
|}

== أمثلة ==
مثال عن استخدام طول مطلق <code>[[CSS/length|<length>]]</code> ونسبة مئوية <code>[[CSS/percentage|<percentage>]]</code> مع الخاصية <code>text-indent</code> لإضافة مسافة بادئة قبل أوّل سطر في الفقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="html">
<p class="length">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="percent">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
p { 
  border: 1px solid #eaecf0;
  background-color: #f8f9fa;
  padding: 1em;
}

.length  { text-indent: 2em; }
.percent { text-indent: 5%;  }
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|3.0
|3.5
|1.0
|-
!hanging و each-line
|غير مدعومة
|غير مدعومة
|غير مدعومة
|غير مدعومة
|غير مدعومة
|}

== البنية العامة ==
تقبل الخاصية <code>text-indent</code> إحدى القيم التالية.
=== القيمة <code>[[CSS/length|<length>]]</code> ===
تُحدَّد المسافة البادئة كطول مطلق <code>[[CSS/length|<length>]]</code>، ويُسمَح باستخدام القيم السالبة.
=== القيمة <code>[[CSS/percentage|<percentage>]]</code> ===
تُحدَّد المسافة البادئة كنسبة مئوية من عرض العنصر الكتلي الحاوي على العنصر الحالي.
=== البنية الرسمية ===
<syntaxhighlight lang="css">
text-indent: <length> | <percentage>;

</syntaxhighlight>
== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-text-3/#text-indent CSS Text Module Level 3]، أضافت هذه المواصفة الكلمتين المحجوزتين <code>hanging</code> و <code>each-line</code>، لكنها ليستا مدعومتين في أيّ متصفح حتى الآن.
* مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].

*مواصفة ‎[http://www.w3.org/TR/CSS2/text.html#indentation-prop CSS Level 2 (Revision 1)‎].
*مواصفة [http://www.w3.org/TR/CSS1/#text-indent CSS Level 1].
[[تصنيف:CSS]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS Text]]
[[تصنيف:CSS Text Decoration]]