ما هو Padding في CSS؟ شرح ترتيب قيم CSS Padding باحتراف

ما هي خاصية padding في CSS؟

تُستخدم خاصية padding في CSS لإضافة مساحة داخلية حول محتوى العنصر. هذه المساحة تكون بين المحتوى نفسه وبين حدود العنصر border، ولذلك فهي تختلف عن المسافة الخارجية التي تتحكم بها خاصية margin.

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

فهم نموذج الصندوق CSS Box Model

كل عنصر في HTML يُعرض على الصفحة ضمن ما يُعرف باسم Box Model، ويتكوّن من أربعة أجزاء رئيسية:

• المحتوى content
• الحشو الداخلي padding
• الحدود border
• الهامش الخارجي margin

بمعنى آخر، فإن padding لا يضيف مساحة خارج العنصر، بل يوسّع المسافة الداخلية المحيطة بالمحتوى قبل الوصول إلى الحد.

في هذا التوضيح، تمثل المنطقة الزرقاء المحتوى، بينما تمثل المنطقة الخضراء المساحة الداخلية الناتجة عن padding. لاحظ أن هذه المساحة تأتي داخل border وليس خارجه.

خصائص padding الأساسية في CSS

يمكنك التحكم في كل جهة من جهات العنصر بشكل مستقل باستخدام خصائص مخصصة.

خاصية padding-top

تضيف مساحة داخلية في الجزء العلوي من العنصر.

padding-top: 20px;

خاصية padding-right

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

padding-right: 40px;

خاصية padding-bottom

تضيف مساحة داخلية في أسفل العنصر.

padding-bottom: 20px;

خاصية padding-left

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

padding-left: 40px;

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

يخلط كثير من المبتدئين بين padding وmargin، لكن الفرق بينهما جوهري:

• padding: ينشئ مساحة داخل العنصر، أي بين المحتوى والحدود.
• margin: ينشئ مساحة خارج العنصر، أي بين العنصر والعناصر المحيطة به.

إذا أردت زيادة الفراغ داخل زر أو بطاقة أو صندوق نصي، فاستخدم padding. أما إذا أردت ترك مسافة بين عنوان وفقرة أو بين عنصرين متجاورين، فاستخدم margin.

على سبيل المثال، عند تطبيق margin-bottom على عنصر h1، ستتم إضافة مسافة أسفل العنوان، ما يخلق فراغاً واضحاً بينه وبين العنصر التالي مثل p.

margin-bottom: 50px;

استخدام الخاصية المختصرة padding

توفر CSS طريقة مختصرة لكتابة قيم الحشو الداخلي عبر الخاصية padding بدلاً من كتابة padding-top وpadding-right وpadding-bottom وpadding-left بشكل منفصل.

هذه الصيغة المختصرة تجعل الكود أنظف وأسهل في الصيانة، خاصة عند بناء مكونات متكررة داخل المشروع.

عند استخدام قيمة واحدة

إذا استخدمت قيمة واحدة فقط، فسيتم تطبيقها على الجهات الأربع كلها بالتساوي.

padding: 10px;

وهي تعادل:

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

عند استخدام قيمتين

إذا استخدمت قيمتين، فالقيمة الأولى تُطبَّق على الأعلى والأسفل، بينما القيمة الثانية تُطبَّق على اليمين واليسار.

padding: 10px 30px;

وهي تعادل:

padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;

عند استخدام ثلاث قيم

في حالة ثلاث قيم، يكون الترتيب كالتالي:

• القيمة الأولى: الأعلى
• القيمة الثانية: اليمين واليسار
• القيمة الثالثة: الأسفل

padding: 10px 30px 50px;

وهي تعادل:

padding-top: 10px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;

عند استخدام أربع قيم

إذا استخدمت أربع قيم، فسيكون الترتيب باتجاه عقارب الساعة:

• الأعلى top
• اليمين right
• الأسفل bottom
• اليسار left

وهذه هي القاعدة الأشهر لتذكر ترتيب قيم padding.

padding: 10px 20px 30px 40px;

وهي تعادل:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

كيف تتذكر ترتيب CSS Padding Order بسهولة؟

أفضل طريقة لحفظ الترتيب هي تخيل عقارب الساعة وهي تتحرك بهذا التسلسل:

1. الأعلى
2. اليمين
3. الأسفل
4. اليسار

أي أن الصيغة العامة لأربع قيم هي: top right bottom left.

هذه القاعدة لا تفيد فقط مع padding، بل تُستخدم أيضاً كثيراً مع خصائص مثل margin في CSS.

ما الوحدات التي يمكن استخدامها مع padding؟

يمكنك تحديد قيم padding باستخدام أكثر من وحدة، بحسب احتياج التصميم، ومن أشهرها:

• px للقيم الثابتة
• em للقيم المرتبطة بحجم الخط الأب
• rem للقيم المرتبطة بحجم الخط الجذري
• النسبة المئوية % في بعض السيناريوهات المرنة

لكن من المهم معرفة أن القيم السالبة غير مسموح بها مع padding. فإذا كتبت قيمة سالبة، فلن يكون ذلك صحيحاً وفق قواعد CSS.

متى تستخدم padding ومتى تستخدم margin؟

لاختيار الخاصية الصحيحة، اسأل نفسك: هل أريد توسيع المسافة داخل العنصر أم خارجه؟

• استخدم padding عندما تريد تحسين المساحة الداخلية داخل الأزرار والبطاقات وحقول الإدخال والمربعات النصية.
• استخدم margin عندما تريد فصل العناصر عن بعضها البعض داخل الصفحة.

نقطة مهمة أخرى: يمكن استخدام قيم سالبة مع margin في بعض الحالات المتقدمة، بينما لا يمكن فعل ذلك مع padding.

أمثلة عملية سريعة

زر بمساحة داخلية متوازنة

button {
  padding: 12px 24px;
}

في هذا المثال، يحصل الزر على مساحة علوية وسفلية مقدارها 12px، ومساحة يمنى ويسرى مقدارها 24px، ما يجعله أكثر راحة للمستخدم بصرياً وتفاعلياً.

بطاقة محتوى بمسافات داخلية واضحة

.card {
  padding: 20px;
  border: 1px solid #ddd;
}

هنا تم استخدام padding موحد لمنع التصاق النصوص بالحواف، وهو أسلوب شائع جداً في تصميم البطاقات والمكونات الحديثة.

الخلاصة التقنية

خاصية padding من الأساسيات التي لا غنى عنها في تنسيق صفحات HTML باستخدام CSS، لأنها تتحكم مباشرة في المساحة الداخلية للعناصر وتؤثر على المظهر العام وتجربة الاستخدام. إذا أردت فراغاً داخل العنصر فاختر padding، وإذا أردت فراغاً بين العناصر فاختر margin. أما ترتيب القيم المختصرة، فاحفظه دائماً وفق اتجاه عقارب الساعة: top ثم right ثم bottom ثم left.