الفرق بين المراجعتين ل"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.