«CSS/margin-left»: الفرق بين المراجعتين

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
 
 
(4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>margin-left</code>}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>margin-left</code>}}</noinclude>
الخاصية <code>margin-left</code> في CSS تضبط الهامش في الطرف الأيسر من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.<syntaxhighlight lang="css">
+
الخاصية <code>margin-left</code> في 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%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 31: سطر 20:
 
|نسبة مئوية أو طول مطلق.
 
|نسبة مئوية أو طول مطلق.
  
|}
+
|}<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>.
  
 
== أمثلة ==
 
== أمثلة ==
سطر 74: سطر 76:
 
== البنية العامة ==
 
== البنية العامة ==
 
تقبل الخاصية <code>margin-left</code> قيمةً واحدةً يمكن أن تكون طولًا <code>[[CSS/length|<length>]]</code> أو نسبةً مئويةً <code>[[CSS/percentage|<percentage>]]</code> أو الكلمة المحجوزة <code>auto</code>، وكل قيمة يمكن أن تكون موجبة أو سالبة أو صفر.
 
تقبل الخاصية <code>margin-left</code> قيمةً واحدةً يمكن أن تكون طولًا <code>[[CSS/length|<length>]]</code> أو نسبةً مئويةً <code>[[CSS/percentage|<percentage>]]</code> أو الكلمة المحجوزة <code>auto</code>، وكل قيمة يمكن أن تكون موجبة أو سالبة أو صفر.
=== القيمة <code>auto</code> ===
+
=== <code>auto</code> ===
سيكون للهامش الأيسر حصّة من المسافة الأفقية غير المستخدمة التي تُحدَّد بشكل رئيسي من التخطيط المستخدم. ولو كانت قيمة الخاصيتين <code>margin-left</code> و <code>[[CSS/margin-right|margin-right]]</code> تساوي <code>auto</code>، فستوزّع المسافة المحسوبة بالتساوي. هذا الجدول يوضِّح مختلف الحالات:
+
سيكون للهامش الأيسر حصّة من المسافة الأفقية غير المستخدمة التي تُحدَّد بشكل رئيسي من التخطيط المستخدم. ولو كانت الخاصيتين <code>margin-left</code> و <code>[[CSS/margin-right|margin-right]]</code> تساوي <code>auto</code>، فستوزّع المسافة المحسوبة بالتساوي. هذا الجدول يوضِّح مختلف الحالات:
 
{| class="wikitable"
 
{| class="wikitable"
 
!قيمة [[CSS/display|display]]
 
!قيمة [[CSS/display|display]]
سطر 113: سطر 115:
 
|}
 
|}
  
=== القيمة <code>[[CSS/length|<length>]]</code> ===
+
=== <code>[[CSS/length|<length>]]</code> ===
 
تحديد قيمة الهامش بالأطوال المطلقة.
 
تحديد قيمة الهامش بالأطوال المطلقة.
=== القيمة <code>[[CSS/percentage|<percentage>]]</code> ===
+
=== <code>[[CSS/percentage|<percentage>]]</code> ===
 
تحديد قيمة الهامش كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي.
 
تحديد قيمة الهامش كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي.
  
سطر 123: سطر 125:
  
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
== انظر أيضًا ==
 +
* صفحة <code>[[CSS/margin|margin]]</code> وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: <code>[[CSS/margin-top|margin-top]]</code>، و <code>[[CSS/margin-bottom|margin-bottom]]</code>، و <code>[[CSS/margin-right|margin-right]]</code>.
 +
* صفحة الخاصية <code>[[CSS/padding|padding]]</code> التي تضبط الحاشية في الأطراف الأربعة للعنصر.
 +
* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيف يجب أن يتموضع العنصر في المستند.
  
 
== مصادر ومواصفات ==
 
== مصادر ومواصفات ==
سطر 129: سطر 136:
 
* مواصفة ‎[http://www.w3.org/TR/CSS2/box.html#margin-properties CSS Level 2 (Revision 1)‎].
 
* مواصفة ‎[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‎].  
 
* مواصفة [http://www.w3.org/TR/CSS1/#margin-left CSS Level 1‎].  
[[تصنيف:CSS]]
+
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property]]
+
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Box Model]]
+
[[تصنيف:CSS Box Model|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 19:12، 24 يوليو 2018

الخاصية margin-left في CSS تضبط الهامش في الطرف الأيسر من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.

بطاقة الخاصية

القيمة الابتدائية 0
تُطبَّق على جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية display إحدى الكلمات المحجوزة table-caption و table و inline-table.
قابلة للوراثة لا
قابلة للتحريك نعم
القيمة المحسوبة نسبة مئوية أو طول مطلق.
/* <length> أطوال */
margin-left: 10px;  /* طول مطلق */
margin-left: 1em;   /* طول نسبي لحجم الخط */
margin-left: 5%;    /* طول نسبي لعرض أقرب حاوية كتلية */

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

/* القيم العامة */
margin-left: inherit;
margin-left: initial;
margin-left: unset;
في حالات نادرة التي يكون فيها عرض العنصر مُقيّدًا (أي أنَّ جميع الخاصيات width و margin-left و border و padding و margin-right مُعرَّفة)، فستهمل الخاصية margin-left، وسيكون لها نفس قيمة auto.

أمثلة

سنستخدم العنصر <div> في المثال الآتي لتبيان أثر مختلف أنواع القيم للخاصية margin-left:
<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>
شيفرة 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%; }

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 1.0 3.0 3.5 1.0

البنية العامة

تقبل الخاصية margin-left قيمةً واحدةً يمكن أن تكون طولًا <length> أو نسبةً مئويةً <percentage> أو الكلمة المحجوزة auto، وكل قيمة يمكن أن تكون موجبة أو سالبة أو صفر.

auto

سيكون للهامش الأيسر حصّة من المسافة الأفقية غير المستخدمة التي تُحدَّد بشكل رئيسي من التخطيط المستخدم. ولو كانت الخاصيتين margin-left و margin-right تساوي auto، فستوزّع المسافة المحسوبة بالتساوي. هذا الجدول يوضِّح مختلف الحالات:

قيمة display قيمة float قيمة position قيمة auto المحسوبة
inline أو inline-block أو inline-table أي قيمة static أو relative 0
inline أو inline-block أو block أو table أو inline-table أو list-item أو table-caption. أي قيمة static أو relative 0، ما عدا إذا كانت قيمة margin-left و margin-right تساوي auto، ففي هذه الحالة سيتم توسيط العنصر ضمن العنصر الأب.
inline أو inline-block أو block أو table أو inline-table أو list-item أو table-caption. left أو right static أو relative 0
أي قيمة table-*‎ ما عدا table-caption. أي قيمة أي قيمة 0
أي قيمة ما عدا flex و inline-flex و table-*‎. أي قيمة fixed أو absolute 0، ما عدا إذا كانت قيمة margin-left و margin-right تساوي auto، ففي هذه الحالة سيتم توسيط العنصر ضمن العنصر الأب.
flex و inline-flex. أي قيمة أي قيمة 0، ما عدا إذا كانت قيمة margin-left و margin-right تساوي auto، ففي هذه الحالة سيتم توسيط العنصر ضمن العنصر الأب.

<length>

تحديد قيمة الهامش بالأطوال المطلقة.

<percentage>

تحديد قيمة الهامش كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي.

البنية الرسمية

margin-left: <length> | <percentage> | auto;

انظر أيضًا

  • صفحة margin وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: margin-top، و margin-bottom، و margin-right.
  • صفحة الخاصية padding التي تضبط الحاشية في الأطراف الأربعة للعنصر.
  • صفحة الخاصية position التي تصف كيف يجب أن يتموضع العنصر في المستند.

مصادر ومواصفات