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

مصادر ومواصفات

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/margin-top&oldid=12296»