الخاصية margin-bottom

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

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

بطاقة الخاصية

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

أمثلة

سنستخدم العنصر <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;

انظر أيضًا

  • صفحة margin وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: margin-top، و margin-right، و margin-left.
  • صفحة الخاصية padding التي تضبط الحاشية في الأطراف الأربعة للعنصر.
  • صفحة الخاصية position التي تصف كيف يجب أن يتموضع العنصر في المستند.

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