الخاصية padding

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الخاصية padding المختصرة في CSS تضبط الحاشية (padding) في الأطراف الأربعة للعنصر، ويمكن استخدام هذه الخاصية بدلًا من ضبط الحواشي فرادى باستخدام padding-top و padding-right و padding-bottom و padding-left.
/* تطبيق الحواشي على الأطراف الأربعة */
padding: 1em;

/* vertical | horizontal */
padding: 5% 10%;

/* top | horizontal | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 5px 1em 0 1em;

/* القيم العامة */
padding: inherit;
padding: initial;
padding: unset;
القيمة الابتدائية لكل خاصية مختصرة:
تُطبَّق على جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية display إحدى الكلمات المحجوزة table-caption و table و inline-table.
قابلة للوراثة لا
قابلة للتحريك نعم
القيمة المحسوبة نسبة مئوية أو طول مطلق.

أمثلة

لضبط الحواشي في الأطراف كلها إلى 5% من عرض العنصر الكتلي الحاوي للعنصر الهدف:
padding: 5%;
لضبط الحواشي في الأطراف كلها إلى 10px:
padding: 10px;
لضبط الحواشي في الطرفين العلوي والسفلي إلى 1.6em، والطرفين الأيسر والأيمن إلى 20px، فسنستخدم القاعدة:
padding: 1.6em 20px;
لضبط الحواشي في الطرف العلوي إلى 10px، والطرف السفلي إلى 1em، والطرفين الأيسر والأيمن إلى 3%، فسنستخدم القاعدة:
padding: 10px 3% 1em;
يمكن استخدام الخاصية padding لضبط قيم الخاصيات padding-top و padding-right و padding-bottom و padding-left كلها، فالقاعدة:
padding: 10px 3px 30px 5px;
تكافئ القواعد الآتية:
padding-top: 10px;
padding-right: 3px;
padding-bottom: 30px;
padding-left: 5px;

لاحظ مقدار مسافة الحاشية بين الإطار والمحتوى.

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 1.0 4.0 3.5 1.0

البنية العامة

تقبل الخاصية padding قيمةً واحدةً أو قيمتين أو ثلاث أو أربع قيم، وكل قيمة يمكن أن تكون طولًا <length> أو نسبةً مئويةً <percentage>.

  • عند تحديد قيمة واحدة، فستُطبّق على جميع الأطراف.
  • عند تحديد قيمتين، فأوّل قيمة ستُطبّق على الطرفين العلوي والسفلي، والقيمة الثانية على الطرفين الأيمن والأيسر.
  • عند تحديد ثلاث قيم، فأوّل قيمة ستُطبّق على الطرف العلوي، والقيمة الثانية على الطرفين الأيمن والأيسر، والقيمة الثالثة على الطرف السفلي.
  • عند تحديد أربع قيم، فستُطبّق القيم على الطرف العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الطرف العلوي ثم يستمر وفق اتجاه عقارب الساعة).

القيمة <length>

تحديد قيمة الحاشية بالأطوال المطلقة، ولا يجوز أن تكون القيمة سالبةً.

القيمة <percentage>

تحديد قيمة الحاشية كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي، ولا يجوز أن تكون القيمة سالبةً.

البنية الرسمية

padding: [ <length> | <percentage> ]{1,4};

مصادر ومواصفات