الفرق بين المراجعتين لصفحة: «CSS/margin-top»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 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> === | ||
تحديد قيمة الهامش كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي. | تحديد قيمة الهامش كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي. | ||
| سطر 86: | سطر 88: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة <code>[[CSS/margin|margin]]</code> وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: <code>[[CSS/margin-bottom|margin-bottom]]</code>، و <code>[[CSS/margin-right|margin-right]]</code>، و <code>[[CSS/margin-left|margin-left]]</code>. | |||
* صفحة الخاصية <code>[[CSS/padding|padding]]</code> التي تضبط الحاشية في الأطراف الأربعة للعنصر. | |||
* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيف يجب أن يتموضع العنصر في المستند. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
| سطر 92: | سطر 99: | ||
* مواصفة [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-top CSS Level 1]. | * مواصفة [http://www.w3.org/TR/CSS1/#margin-top CSS Level 1]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Box Model]] | [[تصنيف:CSS Box Model|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 19:15، 24 يوليو 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;
انظر أيضًا
- صفحة
marginوصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي:margin-bottom، وmargin-right، وmargin-left. - صفحة الخاصية
paddingالتي تضبط الحاشية في الأطراف الأربعة للعنصر. - صفحة الخاصية
positionالتي تصف كيف يجب أن يتموضع العنصر في المستند.
مصادر ومواصفات
- مسودة CSS Basic Box Model.
- مسودة CSS Transitions.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.