نموذج الصندوق في CSS: padding و border و margin

هذا الدرس من أهم دروس CSS على الإطلاق. السر الذي يحتاج كل مبتدئ أن يعرفه هو أن كل عنصر في الصفحة صندوق مستطيل، حتى لو بدا دائرياً أو كان مجرد كلمة. عندما تفهم كيف يُبنى هذا الصندوق، ستفهم لماذا تظهر المسافات والأحجام كما تظهر، وستتوقف عن تجربة الأرقام عشوائياً.

طبقات الصندوق الأربع

كل عنصر يتكون من أربع طبقات، من الداخل إلى الخارج:

1. المحتوى (Content): النص أو الصورة نفسها.
2. الحشو (Padding): مسافة داخلية بين المحتوى والإطار.
3. الإطار (Border): الخط المحيط بالعنصر.
4. الهامش (Margin): مسافة خارجية بين العنصر والعناصر المجاورة.

تخيّل صورة معلّقة في برواز على الحائط:

• الصورة نفسها هي المحتوى.
• الورق الأبيض حول الصورة داخل البرواز هو الحشو.
• البرواز الخشبي هو الإطار.
• المسافة بين هذا البرواز والبرواز المجاور على الحائط هي الهامش.

.card {
  padding: 20px;
  border: 3px solid #5b5bf0;
  margin: 16px;
}

شاهد الصندوق بعينك

اضغط بزر الفأرة الأيمن على أي عنصر في أي موقع واختر «فحص» (Inspect). ستجد في أدوات المطور رسماً لنموذج الصندوق بألوان مختلفة لكل طبقة، مع أرقامها الحقيقية. هذه أفضل أداة لفهم مسافات أي تصميم.

الحشو padding

.box {
  padding: 20px;              /* 20 من كل الجهات */
  padding: 10px 20px;         /* 10 فوق وتحت، 20 على الجانبين */
  padding: 5px 10px 15px 20px; /* أعلى، ثم يمين، ثم أسفل، ثم يسار */
}

الصيغة ذات القيم الأربع تسير مع عقارب الساعة بدءاً من الأعلى. ويمكنك تحديد جهة واحدة فقط، مثل padding-top.

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

الإطار border

يُكتب غالباً بثلاث قيم: السمك، ثم النوع، ثم اللون:

.box {
  border: 2px solid gray;
}
.dashed {
  border: 2px dashed tomato; /* متقطع */
}
.rounded {
  border: 1px solid #e6e8f0;
  border-radius: 12px; /* زوايا دائرية */
}

أنواع الإطار الشائعة: solid (متصل)، و dashed (متقطع)، و dotted (منقط)، و none (بلا إطار).

و border-radius ليست جزءاً من الإطار نفسه لكنها ترتبط به: تجعل زوايا الصندوق دائرية. وإذا أعطيت صندوقاً مربعاً القيمة border-radius: 50% يصبح دائرة، وهكذا تُصنع صور الملفات الشخصية الدائرية.

الهامش margin

يُكتب بنفس صيغ الحشو، لكنه شفاف دائماً ولا يأخذ لون الخلفية:

.box {
  margin: 20px 0; /* 20 فوق وتحت، 0 على الجانبين */
}

توسيط عنصر أفقياً: إذا كان للعنصر عرض محدد، فإن margin: 0 auto يقسم المساحة الفارغة بالتساوي على الجانبين، فيصبح في المنتصف:

.container {
  width: 600px;
  margin: 0 auto;
}

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

الهوامش تتداخل رأسياً

إذا كان لعنصرين متتاليين فوق بعضهما هامش 20px و 30px، فالمسافة بينهما 30px وليست 50px. الهوامش الرأسية المتجاورة تندمج ويفوز الأكبر. هذه الظاهرة تسمى Margin Collapsing، وتفاجئ كثيراً من المبتدئين.

العرض والارتفاع، ومشكلة الحساب

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

كم العرض الحقيقي لهذا الصندوق على الشاشة؟ ستتوقع 300px، لكن الإجابة الافتراضية 350px! لأن width يحدد عرض المحتوى فقط، ثم يُضاف إليه الحشو من الجانبين (40) والإطار من الجانبين (10).

هذا الحساب مزعج جداً، لذلك يبدأ أغلب المطورين كل ملف CSS بهذه القاعدة:

* {
  box-sizing: border-box;
}

مع border-box يصبح width: 300px هو العرض الكلي بما فيه الحشو والإطار، ويتقلص المحتوى من الداخل ليتسع للباقي. هكذا يصبح الرقم الذي تكتبه هو الرقم الذي تراه.

عناصر block و inline

ليست كل الصناديق متشابهة في سلوكها:

• عناصر الكتلة (Block): مثل <p> و <div> و <h1>. تبدأ في سطر جديد، وتأخذ عرض السطر كاملاً، وتقبل width و height.
• العناصر السطرية (Inline): مثل <a> و <strong> و <span>. تجلس داخل السطر بجانب النص، وتأخذ عرض محتواها فقط، وتتجاهل width و height والهوامش الرأسية.

ويمكنك تغيير السلوك بالخاصية display:

a.button {
  display: inline-block; /* يبقى في السطر، لكن يقبل العرض والحشو كاملاً */
  padding: 10px 20px;
}

inline-block مفيدة جداً للأزرار. وفي الدرسين القادمين ستتعرف على display: flex و display: grid، وهما أقوى أدوات ترتيب العناصر.

جرّب بنفسك

غيّر قيم padding و margin ولاحظ الفرق بين المسافة الداخلية والخارجية. ثم احذف سطر box-sizing ولاحظ كيف يكبر الصندوق الثاني:

جرّب بنفسكCSS

محرر الكود (CSS)* { box-sizing: border-box; } body { font-family: sans-serif; } .box { background-color: #ececff; padding: 16px; border: 3px solid #5b5bf0; margin: 12px 0; border-radius: 12px; } .fixed { width: 250px; } .avatar { width: 70px; height: 70px; background: #e44d26; border-radius: 50%; } .btn { display: inline-block; padding: 6px 14px; background: #5b5bf0; color: white; border-radius: 10px; text-decoration: none; }

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• الخلط بين padding و margin: إذا أردت أن تكبر الخلفية حول النص فهذا حشو. وإذا أردت إبعاد العنصر عن جيرانه فهذا هامش.
• نسيان box-sizing: فيصبح العنصر أعرض من المتوقع ويخرج عن الشاشة على الموبايل.
• إعطاء width لعنصر inline: لن يحدث شيء، لأن العناصر السطرية تتجاهله. حوّله إلى inline-block أو block أولاً.

اختبر نفسك

سؤال

أي طبقة في نموذج الصندوق تمتد إليها خلفية العنصر وتفصل المحتوى عن الإطار؟

marginpaddingborder-radius

سؤال

مع box-sizing: border-box، صندوق فيه width: 200px و padding: 20px. كم عرضه الكلي؟

200px240px160px

الخلاصة

• كل عنصر صندوق من أربع طبقات: المحتوى، ثم الحشو، ثم الإطار، ثم الهامش.
• padding داخلي ويأخذ الخلفية، و margin خارجي وشفاف، و border بين الاثنين.
• border-radius للزوايا الدائرية، و margin: 0 auto لتوسيط عنصر له عرض.
• box-sizing: border-box يجعل العرض الذي تكتبه هو العرض الحقيقي.
• عناصر block تأخذ السطر كاملاً، و inline تجلس داخله، و inline-block تجمع بينهما.