الفرق بين المراجعتين لصفحة: «CSS/margin-top»
< CSS
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| سطر 92: | سطر 92: | ||
* مواصفة [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}}]] | ||
مراجعة 15:35، 28 يناير 2018
الخاصية margin-top في CSS تضبط الهامش في الطرف العلوي من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.
/* <length> أطوال */
margin-top: 10px; /* طول مطلق */
margin-top: 1em; /* طول نسبي لحجم الخط */
margin-top: 5%; /* طول نسبي لعرض أقرب حاوية كتلية */
/* الكلمات المحجوزة */
margin-top: auto;
/* القيم العامة */
margin-top: inherit;
margin-top: initial;
margin-top: unset;
| القيمة الابتدائية | 0
|
|---|---|
| تُطبَّق على | جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية display إحدى الكلمات المحجوزة table-caption و table و inline-table.
|
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | نسبة مئوية أو طول مطلق. |
أمثلة
سنستخدم العنصر <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.