padding

خاصية الحشوة الداخلية padding

خاصية padding تصنع مسافة داخل العنصر بين حدوده ومحتواه — هي التي تعطي الأزرار والبطاقات «مساحة التنفس».

المسافة «داخل السور»: تبعد المحتوى عن الحواف، وتتلون بخلفية العنصر، وتكبّر مساحة الضغط في الأزرار والروابط — زر بلا padding مجرد نص بائس. نفس اختصارات margin تمامًا: قيمة أو قيمتان (رأسي أفقي) أو أربع بعقارب الساعة.

مصيدة المبتدئ الكلاسيكية: padding يُضاف فوق width فيكبر الصندوق عن حساباتك — علاجها الدائم box-sizing: border-box الذي يجعل العرض شاملًا (انظر صفحته).

الصياغة

.button {
  padding: 10px 24px; /* رأسي أفقي — وصفة الأزرار */
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .no-pad, .pad { background: #7c5cff; color: white; border-radius: 8px; display: inline-block; margin: 4px; }
  .pad { padding: 10px 24px; }
</style>
<span class="no-pad">زر بلا padding</span>
<span class="pad">زر بـ padding: 10px 24px</span>
<p>نفس النص — الفرق كله مساحة تنفس.</p>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
padding: 10px 24px	رأسي أفقي — إيقاع الأزرار القياسي
padding: 16px	حشوة موحدة — البطاقات والصناديق
padding-inline / padding-block	النسخ المنطقية الصديقة لـ RTL

💡 نصائح عملية

أفقي الأزرار أكبر من رأسيها (24/10 مثلًا) — إيقاع بصري أفضل
كبّر مساحة ضغط الروابط الصغيرة بالجوال بـ padding — وصولية مجانية

⚠️ أخطاء شائعة

نسيان border-box فتنكسر الحسابات كلما أضفت حشوة
استخدام padding لإبعاد الجيران — هذا دور margin

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs