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

<noinclude>{{DISPLAYTITLE:الخاصية <code>margin-left</code>}}</noinclude>
الخاصية <code>margin-left</code> في CSS تضبط الهامش في الطرف الأيسر من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.<syntaxhighlight lang="css">
/* <length> أطوال */
margin-left: 10px;  /* طول مطلق */
margin-left: 1em;   /* طول نسبي لحجم الخط */
margin-left: 5%;    /* طول نسبي لعرض أقرب حاوية كتلية */

/* الكلمات المحجوزة */
margin-left: auto;

/* القيم العامة */
margin-left: inherit;
margin-left: initial;
margin-left: unset;
</syntaxhighlight>في حالات نادرة التي يكون فيها عرض العنصر مُقيّدًا (أي أنَّ جميع الخاصيات <code>[[CSS/width|width]]</code> و <code>margin-left</code> و <code>[[CSS/border|border]]</code> و <code>[[CSS/padding|padding]]</code> و <code>[[CSS/background|margin-right]]</code> مُعرَّفة)، فستهمل الخاصية <code>margin-left</code>، وسيكون لها نفس قيمة <code>auto</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" |القيمة المحسوبة
|نسبة مئوية أو طول مطلق.

|}

== أمثلة ==
سنستخدم العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> في المثال الآتي لتبيان أثر مختلف أنواع القيم للخاصية <code>margin-left</code>:<syntaxhighlight lang="html">
<div class="parent">
  <div class="margin-em">margin-left: 1em;</div>
  <div class="margin-px">margin-left: 10px;</div>
  <div class="margin-percent">margin-left: 10%;</div>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.parent {
  border: 1px solid #eaecf0;
  background-color: #f8f9fa;
  margin: 1em;
}
.parent > div {
  padding: 0.25em;
  background-color: #069;
  color: white;
}
.margin-em      { margin-left: 1em; }
.margin-px      { margin-left: 10px; }
.margin-percent { margin-left: 10%; }
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|3.0
|3.5
|1.0
|}

== البنية العامة ==
تقبل الخاصية <code>margin-left</code> قيمةً واحدةً يمكن أن تكون طولًا <code>[[CSS/length|<length>]]</code> أو نسبةً مئويةً <code>[[CSS/percentage|<percentage>]]</code> أو الكلمة المحجوزة <code>auto</code>، وكل قيمة يمكن أن تكون موجبة أو سالبة أو صفر.
=== القيمة <code>auto</code> ===
سيكون للهامش الأيسر حصّة من المسافة الأفقية غير المستخدمة التي تُحدَّد بشكل رئيسي من التخطيط المستخدم. ولو كانت قيمة الخاصيتين <code>margin-left</code> و <code>[[CSS/margin-right|margin-right]]</code> تساوي <code>auto</code>، فستوزّع المسافة المحسوبة بالتساوي. هذا الجدول يوضِّح مختلف الحالات:
{| class="wikitable"
!قيمة [[CSS/display|display]]
!قيمة [[CSS/float|float]]
!قيمة [[CSS/position|position]]
!قيمة auto المحسوبة
|-
|<code>inline</code> أو <code>inline-block</code> أو <code>inline-table</code>
|أي قيمة
|<code>static</code> أو <code>relative</code>
|<code>0</code>
|-
|<code>inline</code> أو <code>inline-block</code> أو <code>block</code> أو <code>table</code> أو <code>inline-table</code> أو <code>list-item</code> أو <code>table-caption</code>.
|أي قيمة
|<code>static</code> أو <code>relative</code>
|0، ما عدا إذا كانت قيمة <code>margin-left</code> و <code>margin-right</code> تساوي <code>auto</code>، ففي هذه الحالة سيتم توسيط العنصر ضمن العنصر الأب.
|-
|<code>inline</code> أو <code>inline-block</code> أو <code>block</code> أو <code>table</code> أو <code>inline-table</code> أو <code>list-item</code> أو <code>table-caption</code>.
|<code>left</code> أو <code>right</code>
|<code>static</code> أو <code>relative</code>
|<code>0</code>
|-
|أي قيمة <code>table-*‎</code> ما عدا <code>table-caption</code>.
|أي قيمة
|أي قيمة
|<code>0</code>
|-
|أي قيمة ما عدا <code>flex</code> و <code>inline-flex</code> و <code>table-*</code>‎.
|أي قيمة
|<code>fixed</code> أو <code>absolute</code>
|<code>0</code>، ما عدا إذا كانت قيمة <code>margin-left</code> و <code>margin-right</code> تساوي <code>auto</code>، ففي هذه الحالة سيتم توسيط العنصر ضمن العنصر الأب.
|-
|<code>flex</code> و <code>inline-flex</code>.
|أي قيمة
|أي قيمة
|<code>0</code>، ما عدا إذا كانت قيمة <code>margin-left</code> و <code>margin-right</code> تساوي <code>auto</code>، ففي هذه الحالة سيتم توسيط العنصر ضمن العنصر الأب.
|}

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

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

</syntaxhighlight>

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