التباعد الداخلي للعناصر padding

1. ما هو الـ Padding ببساطة؟

الـ Padding هو المساحة الموجودة داخل العنصر.

• تخيل صندوقاً كرتونياً (Border).
• بداخله هدية (Content).
• الفلين أو الإسفنج الذي تضعه حول الهدية لحمايتها هو الـ Padding.

ملاحظة هامة جداً: لون الـ Padding هو نفسه لون خلفية العنصر (Background Color). إذا كانت خلفية الزر حمراء، فالـ Padding سيكون أحمر أيضاً.

2. التحكم في كل جهة بمفردها (الطريقة التفصيلية)

يمكنك التحكم في مساحة الحاشية لكل جهة من الجهات الأربع (فوق، يمين، تحت، يسار) بشكل مستقل تماماً.

الخصائص الأربع

.box {
    background-color: lightblue;
    border: 2px solid blue;
    
    /* أريد مسافة كبيرة من فوق، وصغيرة من الجوانب */
    padding-top: 50px;
    padding-right: 20px;
    padding-bottom: 50px;
    padding-left: 20px;
}

3. الاختصار السحري (The Shorthand Property)

بدلاً من كتابة 4 أسطر كود، يمكنك كتابة سطر واحد فقط باستخدام الخاصية padding. ولكن، طريقة قراءة القيم تعتمد على "كم رقم ستكتب".

تذكر دائماً: الترتيب يبدأ من الساعة 12 (فوق) ويدور مع عقارب الساعة (يمين، تحت، يسار).

أ. الحالة الأولى: 4 قيم (لكل الجهات)

ب. الحالة الثانية: 3 قيم (نادراً ما تستخدم)

ج. الحالة الثالثة: قيمتان (الأكثر استخداماً)

د. الحالة الرابعة: قيمة واحدة (للجميع)

/* 1. مسافات متساوية للجميع */
.card {
    padding: 20px;
}

/* 2. زر: نريد مسافة جانبية أكبر من العلوية */
.btn {
    /* 10 بيكسل فوق وتحت، 30 بيكسل يمين ويسار */
    padding: 10px 30px; 
}

/* 3. تحكم كامل */
.weird-box {
    padding: 10px 5px 15px 20px; /* فوق يمين تحت يسار */
}

4. الفرق القاتل بين Padding و Margin

المبتدئون يخلطون بينهما لأن كلاهما "مسافة". لكن الفرق جوهري.

5. تأثير Padding على حجم الصندوق (Box Sizing)

هذه المعلومة تجعل المحترفين يبكون أحياناً. افتراضياً، الـ Padding يزيد من عرض العنصر.

إذا قلت: width: 100px; ثم قلت padding: 20px; (من الجهتين)، فإن العرض الكلي سيصبح 140px (100 + 20 يمين + 20 يسار).

لحل هذه المشكلة وجعل الـ 100px تتضمن الـ Padding بداخلها، نستخدم الكود السحري التالي:

* {
    box-sizing: border-box;
}

بهذا الكود، إذا كان العرض 100 والبادينج 20، سيقوم المتصفح بتقليص المحتوى ليكون 60، ليبقى الإجمالي 100 كما طلبت.

أمثلة عملية مكثفة

.news-card {
    background-color: white;
    border: 1px solid #ccc;
    
    /* بدون بادينج، النص سيلتصق بالإطار */
    padding: 20px; 
    
    /* هذا يجعل النص مرتاحاً داخل البطاقة */
}

.news-title {
    /* مسافة صغيرة أسفل العنوان فقط */
    padding-bottom: 10px;
}

.nav-link {
    background-color: #333;
    color: white;
    
    /* البادينج هنا يصنع شكل الزر */
    /* 15 فوق وتحت، 25 يمين ويسار */
    padding: 15px 25px;
    
    display: inline-block; /* لكي يعمل البادينج بشكل صحيح */
}