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

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

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

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

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

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

أمثلة

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

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

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

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

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

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

القيمة `auto`

سيكون للهامش الأيمن حصّة من المسافة الأفقية غير المستخدمة التي تُحدَّد بشكل رئيسي من التخطيط المستخدم. ولو كانت قيمة الخاصيتين margin-left و margin-right تساوي auto، فستوزّع المسافة المحسوبة بالتساوي. هذا الجدول يوضِّح مختلف الحالات:

قيمة display	قيمة float	قيمة position	قيمة auto المحسوبة
`inline` أو `inline-block` أو `inline-table`	أي قيمة	`static` أو `relative`	`0`
`inline` أو `inline-block` أو `block` أو `table` أو `inline-table` أو `list-item` أو `table-caption`.	أي قيمة	`static` أو `relative`	0، ما عدا إذا كانت قيمة `margin-left` و `margin-right` تساوي `auto`، ففي هذه الحالة سيتم توسيط العنصر ضمن العنصر الأب.
`inline` أو `inline-block` أو `block` أو `table` أو `inline-table` أو `list-item` أو `table-caption`.	`left` أو `right`	`static` أو `relative`	`0`
أي قيمة `table-*‎` ما عدا `table-caption`.	أي قيمة	أي قيمة	`0`
أي قيمة ما عدا flex و inline-flex و table-*‎.	أي قيمة	`fixed` أو `absolute`	0، ما عدا إذا كانت قيمة `margin-left` و `margin-right` تساوي `auto`، ففي هذه الحالة سيتم توسيط العنصر ضمن العنصر الأب.
`flex` و `inline-flex`.	أي قيمة	أي قيمة	0، ما عدا إذا كانت قيمة `margin-left` و `margin-right` تساوي `auto`، ففي هذه الحالة سيتم توسيط العنصر ضمن العنصر الأب.

القيمة `<length>`

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

القيمة `<percentage>`

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

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

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

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

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