الفرق بين المراجعتين لصفحة: «CSS/padding»

مراجعة 09:41، 9 يوليو 2018

الخاصية padding المختصرة في CSS تضبط الحاشية (padding) في الأطراف الأربعة للعنصر، ويمكن استخدام هذه الخاصية بدلًا من ضبط الحواشي فرادى باستخدام padding-top و padding-right و padding-bottom و padding-left.

بطاقة الخاصية

القيمة الابتدائية	لكل خاصية مختصرة: `padding-bottom`: `0` `padding-left`: `0` `padding-right`: `0` `padding-top`: `0`
تُطبَّق على	جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية `display` إحدى الكلمات المحجوزة `table-caption` و `table` و `inline-table`.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	نسبة مئوية أو طول مطلق.

/* تطبيق الحواشي على الأطراف الأربعة */
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;

أمثلة

لضبط الحواشي في الأطراف كلها إلى 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};

انظر أيضًا

صفحة الخاصيات الفرعية التي تضبطها الخاصية padding وهي: padding-top، و padding-bottom، و padding-right، وpadding-left.
صفحة الخاصية margin التي تضبط الحاشية في الأطراف الأربعة للعنصر.
صفحة الخاصية position التي تصف كيف يجب أن يتموضع العنصر في المستند.

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

مسودة CSS Basic Box Model.
مسودة CSS Transitions.
مواصفة ‎CSS Level 2 (Revision 1)‎.
مواصفة CSS Level 1‎.

@@ سطر 95: / سطر 95: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصيات الفرعية التي تضبطها الخاصية padding وهي: <code>[[CSS/padding-top|padding-top]]</code>، و <code>[[CSS/padding-bottom|padding-bottom]]</code>، و <code>[[CSS/padding-right|padding-right]]</code>، و<code>[[CSS/padding-left|padding-left]]</code>.
+* صفحة الخاصية <code>[[CSS/margin|margin]]</code> التي تضبط الحاشية في الأطراف الأربعة للعنصر.
+* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيف يجب أن يتموضع العنصر في المستند.
 == مصادر ومواصفات ==