الحدود والهوامش والحشو

مراجعة سريعة لصندوق العنصر

كل عنصر صندوق من الداخل للخارج: المحتوى → الحشو (padding) → الحد (border) → الهامش (margin). لنفصّل الثلاثة.

الحدود (Borders)

خط حول العنصر. يحتاج ثلاث قيم: العرض، النوع، اللون:

div {
  border: 2px solid #b026ff;
}

أنواع الحد: solid, dashed, dotted, double, none.

تحكّم بكل جهة:

div {
  border-top: 3px solid red;
  border-bottom: 1px dashed gray;
}

الزوايا الدائرية:

div {
  border-radius: 12px;       /* كل الزوايا */
  border-radius: 50%;        /* دائرة */
}

الحشو (Padding) — المسافة الداخلية

المسافة بين المحتوى والحد (داخل الصندوق):

div {
  padding: 20px;              /* كل الجهات */
  padding: 10px 20px;         /* عمودي | أفقي */
  padding: 5px 10px 15px 20px;/* أعلى يمين أسفل يسار */
  padding-left: 30px;         /* جهة واحدة */
}

الهامش (Margin) — المسافة الخارجية

المسافة خارج الحد، بين العنصر وجيرانه:

div {
  margin: 20px;
  margin: 10px auto;          /* توسيط أفقي! */
  margin-bottom: 40px;
}

🔑 margin: 0 auto; حيلة شهيرة لتوسيط عنصر block أفقيًا (بعرض محدّد).

انهيار الهوامش (Margin Collapse)

عند تجاور هامشين عموديين، يندمجان ويؤخذ الأكبر فقط (لا يُجمعان):

/* عنصر هامشه السفلي 30px، وآخر هامشه العلوي 20px */
/* المسافة بينهما = 30px (الأكبر) وليس 50px */

الحشو مقابل الهامش — الفرق الجوهري

الأخطاء الشائعة

• ❌ الخلط بين padding و margin → استخدم padding للتباعد الداخلي والمظهر، وmargin للتباعد بين العناصر.
• ❌ توقّع جمع الهوامش العمودية → تذكّر الانهيار (يؤخذ الأكبر).
• ❌ نسيان عرض محدّد عند استخدام margin: 0 auto للتوسيط.

خلاصة

border للحد، padding للمسافة الداخلية، margin للمسافة الخارجية. تذكّر اختصارات الجهات، وانهيار الهوامش، وحيلة margin: 0 auto للتوسيط.