نموذج الصندوق: الهوامش CSS

المنطقة الفارغة المحيطة بجدران العنصر هي الهوامش. عند ضبط الهوامش، يتم إنشاء مساحة إضافية "فراغ" خارج العنصر.

أبسط طريقة لضبط الهوامش هي استخدام خاصية margin، وتقبل هذه الخاصية أي وحدة طول، وأيضًا قيمًا مئوية حتى القيم السلبية.

خصائص margin CSS

أبسط طريقة لضبط الهوامش هي استخدام خصائص margin.

يقبل margin أي وحدة طول، يمكن أن تكون بكسلًا أو إنشًا أو مليمترًا أو em.

يمكن تعيين margin إلى auto. الطريقة الأكثر شيوعًا هي تعيين قيمة طول الهوامش. تعيين margin في جميع جوانب عنصر h1 إلى 1/4 بوصة هو ما يلي:

h1 {margin : 0.25in;}

النموذج التالي يحدد أربعة أجزاء من الهوامش الخارجية للعنصر h1، ووحدة القياس المستخدمة هي البكسل (px):

h1 {margin : 10px 0px 15px 5px;}

مثل إعداد الهوامش الداخلية، تبدأ القيم من الهامش الخارجي الأعلى (top) وتدور حول العنصر بالاتجاه المعاكس للمسار الساعي:

margin: top right bottom left

بالإضافة إلى ذلك، يمكنك أيضًا تحديد قيمة نسبية للهامش الخارجي:

p {margin : 10%;}

النسبة المئوية تُحسب بناءً على عرض الوالدين. في هذا المثال، الهامش الخارجي المحدد للعنصر p هو 10% من عرض الوالدين.

القيمة الافتراضية لـ margin هي 0، لذا إذا لم يتم تحديد قيمة للـ margin، فإن الهامش الخارجي لن يظهر. ولكن، في الواقع، يقدم المتصفح عدة أنماط مسبقة للعديد من العناصر، بما في ذلك الهوامش الخارجية. على سبيل المثال، في المتصفحات التي تدعم CSS، يتم إنشاء فجوات في الأعلى والأسفل من كل عنصر سطر. لذا، إذا لم يتم تحديد الهوامش الخارجية للعنصر p، قد يطبق المتصفح هوامشًا خارجية افتراضية. بالطبع، يمكنك تغطية هذا النمط الافتراضي إذا قمت بتخصيصه.

قاعدة التكرار القيم

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

في بعض الأحيان، نكتب بعض القيم المكررة:

p {margin: 0.5em 1em 0.5em 1em;}

من خلال التكرار القيم، يمكنك تجنب إعادة إدخال هذا الثنائي. القاعدة السابقة هي نفسها للقاعدة التالية:

p {margin: 0.5em 1em;}

هذه القيمتان يمكن أن تحلما مكان القيم الـ 4 السابقة. كيف يتم ذلك؟ CSS قد حدد بعض القواعد التي تسمح بتخصيص الهوامش الخارجية بأقل من 4 قيم. القواعد هي:

  • إذا كان يفتقر إلى قيمة الهامش الخارجي الأيسر، فإنه يستخدم قيمة الهامش الخارجي الأيمن.
  • إذا كان يفتقر إلى قيمة الهامش الخارجي السفلي، فإنه يستخدم قيمة الهامش الخارجي الأعلى.
  • إذا كان يفتقر إلى قيمة الهامش الخارجي الأيمن، فإنه يستخدم قيمة الهامش الخارجي الأعلى.

الشكل التالي يقدم طريقة أكثر وضوحًا لفهم هذا:

نسخ قيم CSS

بمعنى آخر، إذا تم تحديد 3 قيم للهوامش الخارجية، فإن القيمة الرابعة (ال左边 الهامش الخارجي) ستتم استنساخها من القيمة الثانية (ال右边 الهامش الخارجي). إذا تم تحديد قيمتين، فإن القيمة الرابعة ستتم استنساخها من القيمة الثانية، والقيمة الثالثة (الأسفل الهامش الخارجي) ستتم استنساخها من القيمة الأولى (العملى الهامش الخارجي). في الحالة الأخيرة، إذا تم تحديد قيمة واحدة فقط، فإن الهوامش الخارجية الأخرى ستتم استنساخها من هذه القيمة (العملى الهامش الخارجي).

باستخدام هذا الميكانيزم البسيط، يمكنك تحديد القيم الضرورية فقط، وليس جميع القيم الـ 4، مثلًا:

h1 {margin: 0.25em 1em 0.5em;}	/* شبيه بـ 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}		/* شبيه بـ 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* تساوي 1px 1px 1px 1px */

يوجد عيب صغير في هذه الطريقة، ستواجه هذا المشكلة في النهاية بالضرورة. افترض أنك ترغب في تعيين الهوامش العلوية واليسرى للعنصر p إلى 20 بكسل، والهوامش السفلية واليمنى إلى 30 بكسل. في هذه الحالة، يجب كتابة:

p {margin: 20px 30px 30px 20px;}

بهذه الطريقة يمكنك الحصول على النتيجة التي تريدها. للأسف، لا يمكن تقليل عدد القيم المطلوبة في هذه الحالة.

لننظر في مثال آخر. إذا كنت ترغب في أن تكون جميع الهوامش الخارجية باستثناء الهوامش الجانبية اليسرى هي auto (الهوامش الجانبية اليسرى هي 20px):

p {margin: auto auto auto 20px;}

بالمثل، يمكنك الحصول على النتيجة التي تريدها. المشكلة هي أن إدخال هذه القيم auto يمكن أن يكون معقدًا بعض الشيء. إذا كنت ترغب فقط في التحكم في الهوامش الجانبية للعنصر، فاستخدم خاصيات الهوامش الجانبية.

خصائص الهوامش الجانبية

يمكنك استخدام خاصيات الهوامش الجانبية لتحديد قيمة الهوامش الجانبية للعنصر. افترض أنك ترغب في تعيين الهوامش الجانبية للعنصر p إلى 20px. لا تحتاج إلى استخدام margin (يحتاج إلى إدخال الكثير من auto)، بل يمكنك استخدام الطريقة التالية:

p {margin-left: 20px;}

يمكنك استخدام أي من هذه الخاصيات لتحديد الهوامش الخارجية للجانب المحدد دون التأثير على الهوامش الخارجية للأطراف الأخرى:

يمكن استخدام العديد من هذه الخاصيات الجانبية في نفس القاعدة، مثل:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

بالطبع، في هذه الحالة، قد يكون استخدام margin أسهل بعض الشيء:

p {margin: 20px 30px 30px 20px;}

بغض النظر عما إذا كنت تستخدم خاصية الهوامش الجانبية أو margin، فإن النتيجة ستكون نفسها. عادةً، إذا كنت ترغب في تعيين الهوامش للجوانب المتعددة، فإن استخدام margin سيكون أسهل بعض الشيء. ومع ذلك، من وجهة نظر عرض الوثيقة، لا يهم في الواقع أي طريقة تستخدم، لذا يجب أن تختار الطريقة التي تكون أكثر سهولة بالنسبة لك.

النصائح والتعليقات

نصيحة:يحدد Netscape و IE قيمة الهوامش الافتراضية (margin) للعنصر body هي 8px. ولكن Opera ليست كذلك. على العكس من ذلك، يحدد Opera قيمة الهوامش الداخلية (padding) الافتراضية هي 8px، لذا إذا كنت ترغب في تعديل جميع الهوامش الخارجية لل موقعك وتحقيق عرض صحيح في Opera، فإنه يجب عليك تعديل الهوامش الداخلية لل عنصر body.

مثال على الهوامش الخارجية CSS:

إعداد الهوامش الخارجية للنص
هذا المثال يوضح كيفية تعيين الجرف الخارجي اليسرى للنص.
تعيين الجرف الخارجي اليمنى للنص
هذا المثال يوضح كيفية تعيين الجرف الخارجي اليمنى للنص.
تعيين الجرف الخارجي العلوية للنص
هذا المثال يوضح كيفية تعيين الجرف الخارجي العلوية للنص.
تعيين الجرف الخارجي السفلي للنص
هذا المثال يوضح كيفية تعيين الجرف الخارجي السفلي للنص.
جميع خصائص الجرف الخارجي في بيان واحد.
هذا المثال يوضح كيفية تعيين جميع خصائص الجرف الخارجي في بيان واحد.

خصائص الجرف الخارجي CSS

خصائص وصف
margin خصائص مختصرة. تعيين جميع خصائص الجرف الخارجي في بيان واحد.
margin-bottom تعيين الجرف الخارجي السفلي للعنصر.
margin-left تعيين الجرف الخارجي اليسرى للعنصر.
margin-right تعيين الجرف الخارجي اليمنى للعنصر.
margin-top تعيين الجرف الخارجي العلوية للعنصر.