جاري التحميل...

الحشو الداخلي (Padding) في CSS

الهامش يبعد الصناديق عن بعضها. كثيراً تحتاج أيضاً فراغاً داخل الصندوق — كي لا يلتصق النص بالحد، ويسهل لمس الأزرار. تلك الوسادة الداخلية هي padding.

ما هو padding؟

الحشو فراغ فارغ بين محتوى العنصر وحده. يعيش داخل الحد. كبّر الحشو فيبتعد المحتوى عن الحواف ويكبر الصندوق عادة (ما لم تغيّر box-sizing لاحقاً).

Padding مقابل margin بنظرة

يسهل خلطهما. أبقِ المهمتين منفصلتين.

📊 Padding مقابل margin

الأداة أين يجلس عمل يومي
padding داخل الحد وسادة للنص، تكبير منطقة النقر
margin خارج الحد فصل هذا الصندوق عن الجيران
الخلفية غالباً تملأ الحشو اللون/الصورة يغطيان الوسادة غالباً
الانهيار الرأسي الحشو لا ينهار هوامش الكتل المتراصة قد تنهار

حشو متساوٍ على كل جانب

ابدأ بطول واحد لبطاقة هادئة.

نفس الحشو على كل الجوانب

css
CSS Code 
.card {
padding: 16px;
border: 1px solid #cbd5e1;
background-color: #ffffff;
margin: 12px; /* فراغ خارجي — أداة أخرى */
}

ماذا يجب أن تلاحظ؟

النص بعيد عن الحد الرمادي. الخلفية البيضاء تملأ منطقة الحشو أيضاً — لا الحروف فقط.

قيمتان — رأسي ثم أفقي

طولان يقرنان الجوانب المتقابلة: الأول أعلى وأسفل؛ الثاني يسار ويمين.

حشو رأسي ثم أفقي

css
CSS Code 
.panel {
padding: 20px 12px;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

أربع قيم — مع عقارب الساعة من الأعلى

حين يحتاج كل جانب وسادته: أعلى → يمين → أسفل → يسار.

اختصار الحشو بأربعة جوانب

css
CSS Code 
.note {
padding: 8px 16px 24px 16px;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

الأزرار تحب الحشو

الحشو يكبّر منطقة اللمس المريحة دون تغيير حجم نص التسمية. تسمية قصيرة مع حشو سخي تبدو عصرية وسهلة النقر.

زر بحشو

css
CSS Code 
.btn {
padding: 0.6rem 1.25rem;
border: none;
border-radius: 8px;
background-color: #0f766e;
color: #ffffff;
}

الخلفية تملأ الحشو

بخلاف الهامش (خارجاً)، الحشو ما زال جزءاً من صندوق العنصر المرسوم. لون أو صورة الخلفية يغطيان عادة منطقة الحشو.

منطقة حشو ملونة

css
CSS Code 
.banner {
padding: 24px;
background-color: #0f766e;
color: #ffffff;
border: 4px solid #042f2e;
}

جرّبها بنفسك

  1. بطاقة بـ padding: 16px وحد مرئي — تأكد أن النص لا يلتصق بالحافة.
  2. أعد كتابتها padding: 20px 12px ولاحظ الوسادة الأطول مقابل الأعراض.
  3. زر بحشو أفقي أكبر من الرأسي.
  4. لافتة فيروزية بحشو كبير وحد أغمق — شاهد اللون يملأ الوسادة.
  5. ضع بطاقتين بـ margin فقط بينهما، ثم جرّب padding فقط داخل واحدة — اشعر باختلاف المهمتين.

أخطاء شائعة

  • استخدام الحشو لإبعاد الصناديق (تلك مهمة الهامش)
  • توقع انهيار الحشو بين الأشقاء مثل الهوامش الرأسية (لا يحدث)
  • نسيان أن الخلفية ترسم عادة عبر منطقة الحشو
  • حشو ضخم على كل جانب حين مقياس معتدل أوضح
  • خلط ترتيب القيم الأربع (أعلى، يمين، أسفل، يسار)

ملخص

  • الحشو فراغ داخلي بين المحتوى والحد
  • الاختصار: قيمة أو اثنتان أو أربع (الأربع مع عقارب الساعة من الأعلى)
  • الخلفية غالباً تملأ منطقة الحشو
  • الحشو لا ينهار كما قد تنهار الهوامش الرأسية
  • الأزرار والبطاقات تعتمد على الحشو للراحة
  • الهامش يبقى ابن العم الخارجي — أبقِ الأداتين حادتين

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
8
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 1 من 1
Css درس تعليمي