شرح Padding في CSS — كيف تضيف مسافة داخلية حول المحتوى باحتراف؟

بعد فهم Box Model، أول طبقة نبدأ بها عملياً هي Padding. وهي المسافة الداخلية التي تجعل النص أو الصورة لا تلتصق بحدود العنصر.

إذا كنت تبحث عن ما هو Padding في CSS أو كيفية استخدام padding shorthand أو الفرق بين padding و margin، فهذا الدرس يشرحها بوضوح.

ما هو Padding في CSS؟

Padding هو الفراغ داخل العنصر، بين المحتوى والحدود. يعني أنه يزيد المسافة الداخلية ويجعل التصميم أكثر راحة بصرياً.

التعريف البسيط: Padding في CSS = مسافة داخلية حول المحتوى ضمن نفس الصندوق.

الخصائص المنفصلة للـ Padding في CSS

يمكنك التحكم بكل جهة بشكل مستقل:

• padding-top
• padding-right
• padding-bottom
• padding-left

.card {
    padding-top: 20px;
    padding-right: 40px;
    padding-bottom: 20px;
    padding-left: 40px;
}

ماذا يفعل هذا الكود؟ يضيف مسافة أكبر يميناً ويساراً مقارنة بالأعلى والأسفل.

النتيجة المتوقعة: المحتوى يظهر في وسط مريح داخل البطاقة.

خطأ شائع: نسيان جهة معينة ثم استغراب عدم توازن الفراغ.

padding shorthand في CSS (الطريقة المختصرة)

بدل 4 أسطر، يمكنك كتابة padding بسطر واحد. الترتيب دائماً: Top → Right → Bottom → Left (مع عقارب الساعة).

1) أربع قيم

padding: 10px 20px 30px 40px;

ماذا تعني؟ أعلى 10، يمين 20، أسفل 30، يسار 40.

2) ثلاث قيم

padding: 10px 20px 30px;

ماذا تعني؟ أعلى 10، يمين/يسار 20، أسفل 30.

3) قيمتان

padding: 10px 20px;

ماذا تعني؟ أعلى/أسفل 10، يمين/يسار 20.

4) قيمة واحدة

padding: 16px;

ماذا تعني؟ كل الجهات 16px.

هل Padding يؤثر على حجم العنصر في CSS؟

نعم، في الوضع الافتراضي content-box، زيادة padding تزيد الحجم الكلي للعنصر.

.box {
    width: 200px;
    padding: 20px;
}

الحساب الأفقي: 200 + 20 + 20 = 240px (بدون border/margin).

خطأ شائع: توقع بقاء الصندوق 200px بعد إضافة padding.

الفرق بين Padding و Margin في CSS

الخاصية	مكان المسافة	تأخذ لون الخلفية؟	تقبل قيم سالبة؟
padding	داخل العنصر	نعم	لا
margin	خارج العنصر	لا	نعم

أخطاء شائعة في Padding in CSS

١) استخدام قيم كبيرة جداً: يسبب كسر التخطيط على الشاشات الصغيرة.

٢) الاعتماد على padding بدل margin بين العناصر: يؤدي لمسافات غير متوقعة.

٣) نسيان shorthand order: ينتج عنه جهات معكوسة.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما هو Padding في CSS؟

هو المسافة الداخلية بين المحتوى وحدود العنصر.

كيف أستخدم padding shorthand في CSS؟

بالترتيب: أعلى، يمين، أسفل، يسار. مثال: padding: 10px 20px 30px 40px;.

هل يمكن أن يكون padding سالباً في CSS؟

لا، padding لا يقبل قيماً سالبة.

ما الفرق بين padding و margin في CSS؟

padding داخلي داخل العنصر، margin خارجي بين العناصر.

لماذا العنصر كبر بعد إضافة padding في CSS؟

لأن padding تُضاف للحجم الكلي في content-box.