شرح خاصية CSS Padding وكيفية التحكم في المسافات الداخلية للعناصر

شرح شامل لخاصية CSS Padding مع أمثلة وتوزيعات مفصلة

خاصية padding تُستخدم لإضافة مسافة داخل العنصر بفصل المحتوى عن الحدود (content vs. border). تختلف عن margin لأنها داخلية ولا تؤثر على عناصر مجاورة بشكل مباشر :contentReference[oaicite:8]{index=8}.

1. الكتابة المختصرة (Shorthand) `padding`

length: مثل px، em، الخ.
%: نسبة من عرض العنصر الحاوي.
inherit, initial، ...
لا يُسمح بالقيم السالبة.

div { padding: 25px; }
div { padding: 25px 50px; }
div { padding: 25px 50px 75px; }
div { padding: 25px 50px 75px 100px; }

:contentReference[oaicite:9]{index=9}

2. خصائص كل جانب على حدة

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

:contentReference[oaicite:10]{index=10}

3. مشكلة حجم العنصر (Box Model) وحلها

إذا كان للعنصر عرض محدد، فإن إضافة padding تزيد من الحجم الكلي. لتجنب هذا، نستخدم:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

:contentReference[oaicite:11]{index=11}

4. لماذا لا ينهار padding؟

بما أن padding جزء من العنصر الداخلي ولا يتشارك مع عناصر أخرى، فهو لا يتأثر بانهيار مثل الهوامش (margin collapsing).

:contentReference[oaicite:12]{index=12}

الخاتمة

خاصية padding هي أداة قوية لتنسيق العناصر بصريًا. باستخدام الكتابة المختصرة أو تحديد كل جانب، وتطبيق box-sizing، يمكنك خلق تصميم أنيق ومتناسق دون كسر الحجم المتوقع للعناصر.