عرض مصدر CSS/padding-left

<noinclude>{{DISPLAYTITLE:الخاصية <code>padding-left</code>}}</noinclude>
الخاصية <code>padding-left</code> في CSS تضبط الحاشية (padding) في الطرف الأيسر للعنصر؛ وعلى نقيض الهوامش <code>[[CSS/margin|margin]]</code>، لا يجوز استخدام استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة <code>[[CSS/padding|padding]]</code> لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>0</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية <code>[[CSS/display|display]]</code> إحدى الكلمات المحجوزة <code>table-caption</code> و <code>table</code> و <code>inline-table</code>.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|نعم
|-
! scope="row" |القيمة المحسوبة
|نسبة مئوية أو طول مطلق.

|}<syntaxhighlight lang="css">
/* <length> أطوال */
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;

/* <percentage> نسب مئوية */
padding-left: 10%;

/* القيم العامة */
padding-left: inherit;
padding-left: initial;
padding-left: unset;
</syntaxhighlight>

== أمثلة ==
استخدام الخاصية <code>padding-left</code> لإضافة حاشية على الطرف الأيسر بمقدار <code>10px</code>:<syntaxhighlight lang="html">
<p>
  <code>padding-left: 10px;</code>
</p>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
p {
  border: thin solid;
  padding-left: 10px;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|4.0
|3.5
|1.0
|}

== البنية العامة ==
===  <code>[[CSS/length|<length>]]</code> ===
تحديد قيمة الحاشية بالأطوال المطلقة، ولا يجوز أن تكون القيمة سالبةً.
===  <code>[[CSS/percentage|<percentage>]]</code> ===
تحديد قيمة الحاشية كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي، ولا يجوز أن تكون القيمة سالبةً.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
padding-left: <length> | <percentage>;

</syntaxhighlight>

== انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/padding|padding]]</code> وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: <code>[[CSS/padding-top|padding-top]]</code>، و <code>[[CSS/padding-bottom|padding-bottom]]</code>، و<code>[[CSS/padding-right|padding-right]]</code>.
* صفحة الخاصية <code>[[CSS/margin|margin]]</code> التي تضبط الهوامش في الأطراف الأربعة للعنصر.
* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيف يجب أن يتموضع العنصر في المستند.

== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-box-3/#the-padding CSS Basic Box Model].
* مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].
* مواصفة ‎[http://www.w3.org/TR/CSS2/box.html#padding-properties CSS Level 2 (Revision 1)‎].
* مواصفة [http://www.w3.org/TR/CSS1/#padding-left CSS Level 1‎]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Box Model|{{SUBPAGENAME}}]]