الخاصية `margin-top`

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