الخاصية `margin`

الخاصية margin المختصرة في CSS تضبط الهوامش في الأطراف الأربعة للعنصر، ويمكن استخدام هذه الخاصية بدلًا من ضبط الهوامش فرادى باستخدام margin-top و margin-right و margin-bottom و margin-left.

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

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

/* تطبيق الهوامش على الأطراف الأربعة */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;

/* top | horizontal | bottom */
margin: 1em auto 2em; 

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

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

أمثلة

لضبط الهوامش في الأطراف كلها إلى 5% من عرض العنصر الكتلي الحاوي للعنصر الهدف:

margin: 5%;

لضبط الهوامش في الأطراف كلها إلى 10px:

margin: 10px;

لضبط الهوامش في الطرفين العلوي والسفلي إلى 1.6em، والطرفين الأيسر والأيمن إلى 20px، فسنستخدم القاعدة:

margin: 1.6em 20px;

لضبط الهوامش في الطرف العلوي إلى 10px، والطرف السفلي إلى 1em، والطرفين الأيسر والأيمن إلى 3%، فسنستخدم القاعدة:

margin: 10px 3% 1em;

يمكن استخدام الخاصية margin لضبط قيم الخاصيات margin-top و margin-right و margin-bottom و margin-left كلها، فالقاعدة:

margin: 10px 3px 30px 5px;

تكافئ القواعد الآتية:

margin-top: 10px;
margin-right: 3px;
margin-bottom: 30px;
margin-left: 5px;

يمكن استخدام الكلمة المحجوزة auto مع الهوامش اليمنى واليسرى لتوسيط العنصر رأسيًا. لاحظ أنَّ القاعدة الآتية تضبط الهوامش العلوية والسفلية إلى 2em:

margin: 2em auto;

أما القاعدة الآتية فهي توسِّط العنصر أفقيًا، لكنها تجعل الهوامش العلوية والسفلية مساويةً للصفر:

margin: auto;

لاحظ أنَّ بالإمكان استخدام الهوامش لإزاحة أحد العناصر إلى خارج حدود العنصر الحاوي عليه:

<div class="outside">يتم وضع هذا العنصر خارج الحاوية الخاصة به</div>

شيفرة CSS:

.outside {
  margin: 3rem 0 0 -3rem;
  background-color: #069;
  width: 66%;
  color: white;
}

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

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

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

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

عند تحديد قيمة واحدة، فستُطبّق على جميع الأطراف.
عند تحديد قيمتين، فأوّل قيمة ستُطبّق على الطرفين العلوي والسفلي، والقيمة الثانية على الطرفين الأيمن والأيسر.
عند تحديد ثلاث قيم، فأوّل قيمة ستُطبّق على الطرف العلوي، والقيمة الثانية على الطرفين الأيمن والأيسر، والقيمة الثالثة على الطرف السفلي.
عند تحديد أربع قيم، فستُطبّق القيم على الطرف العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الطرف العلوي ثم يستمر وفق اتجاه عقارب الساعة).

`auto`

سيختار المتصفح قيمة الهوامش المناسبة لكي يستخدمها، ويمكن في بعض الحالات استخدام هذه القيمة لتوسيط عنصر.

`<length>`

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

`<percentage>`

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

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

margin: [ <length> | <percentage> | auto ]{1,4};

ملاحظات

التوسيط الأفقي

يمكن توسيط أحد العناصر أفقيًا باستخدام القاعدتين display: flex; justify-content: center;‎ .

لكن المتصفحات القديمة لا تدعم تخطيط flexbox، ولن تعمل القاعدتان السابقان، ولتوسيط العنصر ضمن العنصر الأب الذي يتبع له فاستخدم margin: 0 auto;‎.

اندماج الهوامش

في بعض الأحيان تُدمَج الهوامش العلوية والسفلية لعنصرين في هامش واحد يساوي أكبر الهوامش.

انظر أيضًا

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

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

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