الخاصية margin

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

/* تطبيق الهوامش على الأطراف الأربعة */
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;

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

أمثلة

لضبط الهوامش في الأطراف كلها إلى 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">This element is positioned outside of its container.</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;‎.

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

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

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

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