الخاصية margin-top

الخاصية 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‎.