الخاصية margin-bottom

الخاصية margin-bottom في CSS تضبط الهامش في الطرف السفلي من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.

/* <length> أطوال */
margin-bottom: 10px;  /* طول مطلق */
margin-bottom: 1em;   /* طول نسبي لحجم الخط */
margin-bottom: 5%;    /* طول نسبي لعرض أقرب حاوية كتلية */

/* الكلمات المحجوزة */
margin-bottom: auto;

/* القيم العامة */
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;

لن يكون لهذه الخاصية تأثير على العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، مثل <strong> أو <span>.

القيمة الابتدائية	0
تُطبَّق على	جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية display إحدى الكلمات المحجوزة table-caption و table و inline-table.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	نسبة مئوية أو طول مطلق.

أمثلة

سنستخدم العنصر <div> في المثال الآتي لتبيان أثر مختلف أنواع القيم للخاصية margin-bottom:

<div class="parent">
  <div class="margin-em">margin-bottom: 1em;</div>
  <div class="margin-px">margin-bottom: 10px;</div>
  <div class="margin-percent">margin-bottom: 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-bottom: 1em;  }
.margin-px      { margin-bottom: 10px; }
.margin-percent { margin-bottom: 10%;  }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	3.0	3.5	1.0

البنية العامة

تقبل الخاصية margin-bottom قيمةً واحدةً يمكن أن تكون طولًا <length> أو نسبةً مئويةً <percentage> أو الكلمة المحجوزة auto، وكل قيمة يمكن أن تكون موجبة أو سالبة أو صفر.

القيمة auto

سيختار المتصفح قيمة الهوامش المناسبة لكي يستخدمها، راجع صفحة الخاصية margin لمزيد من المعلومات.

القيمة <length>

تحديد قيمة الهامش بالأطوال المطلقة.

القيمة <percentage>

تحديد قيمة الهامش كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي.

البنية الرسمية

margin-bottom: <length> | <percentage> | auto;

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

• مسودة CSS Basic Box Model.
• مسودة CSS Transitions.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1‎.