الفرق بين المراجعتين لصفحة: «CSS/margin-top»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>margin-top</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>margin-top</code>}}</noinclude> | ||
الخاصية <code>margin-top</code> في CSS تضبط الهامش في الطرف العلوي من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها. | الخاصية <code>margin-top</code> في CSS تضبط الهامش في الطرف العلوي من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 31: | سطر 20: | ||
|نسبة مئوية أو طول مطلق. | |نسبة مئوية أو طول مطلق. | ||
|} | |}<syntaxhighlight lang="css"> | ||
/* <length> أطوال */ | |||
margin-top: 10px; /* طول مطلق */ | |||
margin-top: 1em; /* طول نسبي لحجم الخط */ | |||
margin-top: 5%; /* طول نسبي لعرض أقرب حاوية كتلية */ | |||
/* الكلمات المحجوزة */ | |||
margin-top: auto; | |||
/* القيم العامة */ | |||
margin-top: inherit; | |||
margin-top: initial; | |||
margin-top: unset; | |||
</syntaxhighlight> | |||
== أمثلة == | == أمثلة == | ||
| سطر 74: | سطر 76: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>margin-top</code> قيمةً واحدةً يمكن أن تكون طولًا <code>[[CSS/length|<length>]]</code> أو نسبةً مئويةً <code>[[CSS/percentage|<percentage>]]</code> أو الكلمة المحجوزة <code>auto</code>، وكل قيمة يمكن أن تكون موجبة أو سالبة أو صفر. | تقبل الخاصية <code>margin-top</code> قيمةً واحدةً يمكن أن تكون طولًا <code>[[CSS/length|<length>]]</code> أو نسبةً مئويةً <code>[[CSS/percentage|<percentage>]]</code> أو الكلمة المحجوزة <code>auto</code>، وكل قيمة يمكن أن تكون موجبة أو سالبة أو صفر. | ||
=== | === <code>auto</code> === | ||
سيختار المتصفح قيمة الهوامش المناسبة لكي يستخدمها، راجع صفحة الخاصية <code>[[CSS/margin|margin]]</code> لمزيد من المعلومات. | سيختار المتصفح قيمة الهوامش المناسبة لكي يستخدمها، راجع صفحة الخاصية <code>[[CSS/margin|margin]]</code> لمزيد من المعلومات. | ||
=== | === <code>[[CSS/length|<length>]]</code> === | ||
تحديد قيمة الهامش بالأطوال المطلقة. | تحديد قيمة الهامش بالأطوال المطلقة. | ||
=== | === <code>[[CSS/percentage|<percentage>]]</code> === | ||
تحديد قيمة الهامش كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي. | تحديد قيمة الهامش كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي. | ||
مراجعة 19:33، 6 يوليو 2018
الخاصية margin-top في CSS تضبط الهامش في الطرف العلوي من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.
بطاقة الخاصية
| القيمة الابتدائية | 0
|
|---|---|
| تُطبَّق على | جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية display إحدى الكلمات المحجوزة table-caption و table و inline-table.
|
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | نسبة مئوية أو طول مطلق. |
/* <length> أطوال */
margin-top: 10px; /* طول مطلق */
margin-top: 1em; /* طول نسبي لحجم الخط */
margin-top: 5%; /* طول نسبي لعرض أقرب حاوية كتلية */
/* الكلمات المحجوزة */
margin-top: auto;
/* القيم العامة */
margin-top: inherit;
margin-top: initial;
margin-top: unset;
أمثلة
سنستخدم العنصر <div> في المثال الآتي لتبيان أثر مختلف أنواع القيم للخاصية margin-top:
<div class="parent">
<div class="margin-em">margin-top: 1em;</div>
<div class="margin-px">margin-top: 10px;</div>
<div class="margin-percent">margin-top: 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-top: 1em; }
.margin-px { margin-top: 10px; }
.margin-percent { margin-top: 10%; }
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 3.0 | 3.5 | 1.0 |
البنية العامة
تقبل الخاصية margin-top قيمةً واحدةً يمكن أن تكون طولًا <length> أو نسبةً مئويةً <percentage> أو الكلمة المحجوزة auto، وكل قيمة يمكن أن تكون موجبة أو سالبة أو صفر.
auto
سيختار المتصفح قيمة الهوامش المناسبة لكي يستخدمها، راجع صفحة الخاصية margin لمزيد من المعلومات.
<length>
تحديد قيمة الهامش بالأطوال المطلقة.
<percentage>
تحديد قيمة الهامش كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي.
البنية الرسمية
margin-top: <length> | <percentage> | auto;
مصادر ومواصفات
- مسودة CSS Basic Box Model.
- مسودة CSS Transitions.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.