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