خاصية Padding
آخر تحديث: 2026-09-13
padding خاصية Padding
تضبط خاصية padding المساحة بين محتوى العنصر وحدوده. بصفتها جزءًا أساسيًا من نموذج الصندوق في CSS، تُستخدم عادةً لإعطاء المحتوى مساحة للتنفس داخل الحاوية وتكبير مناطق النقر وإبراز المحتوى مقابل خلفية. لا يمكن أن تكون قيم padding إلا أطوالًا أو نسبًا مئوية، ولا تكون سالبة أبدًا، ولا يخضع padding للطي.
| الفئة | |
|---|---|
| القيمة الأولية | 0 |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | length |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
padding: <length> | <percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<length> | النوع | قيمة حشو ثابتة. |
<percentage> | النوع | نسبة مئوية بالنسبة لعرض الكتلة الحاضنة. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| padding | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： افتراضيًا، يُضاف padding خارج width/height (content-box)، مما قد يجعل العنصر أكبر مما هو متوقع. يؤدي تعيين box-sizing:border-box إلى تضمين padding ضمن العرض والارتفاع المحددين.
تلميح： يُحسب الحشو بالنسبة المئوية دائمًا بالنسبة لعرض الكتلة الحاضنة، بما في ذلك padding-top و padding-bottom.
❓ الأسئلة الشائعة
Qهل يمكن أن يكون padding سالبًا؟
Aلا. لا يقبل padding إلا الأطوال أو النسب المئوية ولا يمكن أن يكون سالبًا أبدًا؛ تُعامل القيمة السالبة كإعلان غير صالح وتُتجاهل. إذا احتجت إلى دفع المحتوى للخارج، قلّل الحشو بدلًا من ذلك، أو استخدم هامشًا سالبًا، وهو مسموح ويسحب العنصر ككل للخارج. تذكر أن الحشو يمكنه فقط ضغط المحتوى للداخل، لا مدّه للخارج.
Qهل يؤثر padding على منطقة الخلفية؟
Aنعم. تُطلى background-color فوق منطقة الحشو، لأن الحشو جزء من خلفية الصندوق، لكنها لا تمتد إلى منطقة margin. الحشو أكبر يعني خلفية مرسومة أكبر، وزيادة الحشو هي الطريقة الأكثر مباشرة لتكبير المنطقة القابلة للنقر في الزر وجعله أكثر امتلاءً. كما يَقص border-radius الخلفية داخل منطقة الحشو.
Qإلى ماذا تُنسب النسبة المئوية لـ padding؟
Aيُحل الحشو بالنسبة المئوية دائمًا بالنسبة لعرض الكتلة الحاضنة، بما في ذلك padding-top و padding-bottom، اللذان يُحسبان من العرض لا من الارتفاع. هذه الخاصية هي ما يشغّل الحيلة الكلاسيكية للحاويات المتناسبة، حيلة padding-top: padding-top:56.25% (16:9) تدفع الارتفاع للخارج، وكانت الأسلوب القياسي قبل وجود aspect-ratio. تعمل لأن النسبة المئوية تتجاهل الارتفاع تمامًا وتعود دائمًا إلى العرض.
Qلماذا يكبر العنصر عندما أضيف padding؟
Aلأنه مع content-box الافتراضي، يغطي width منطقة المحتوى فقط، ويُضاف padding و border فوقه، مما يزيد المساحة الكلية التي يشغلها العنصر. يؤدي التبديل إلى box-sizing:border-box إلى جعل width يتضمن padding و border، فينكمش المحتوى للداخل ويبقى العرض الكلي كما هو. لهذا يُوصى بـ border-box عالميًا؛ فبدونه، يكون كل عنصر به حشو أعرض من العرض الذي كتبته فعليًا.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
خاصية box-sizing
تحكم فيما إذا كان padding يُحتسب ضمن الحجم الكلي للعنصر.
margin (خاصية Margin)
تعلّم عن المساحة خارج العنصر.
