الفرق بين المراجعتين لصفحة: «CSS/padding»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>padding</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>padding</code>}}</noinclude> | ||
الخاصية <code>padding</code> المختصرة في CSS تضبط الحاشية (padding) في الأطراف الأربعة للعنصر، ويمكن استخدام هذه الخاصية بدلًا من ضبط الحواشي فرادى باستخدام <code>[[CSS/padding-top|padding-top]]</code> و <code>[[CSS/padding-right|padding-right]]</code> و <code>[[CSS/padding-bottom|padding-bottom]]</code> و <code>[[CSS/padding-left|padding-left]]</code>. | الخاصية <code>padding</code> المختصرة في CSS تضبط الحاشية (padding) في الأطراف الأربعة للعنصر، ويمكن استخدام هذه الخاصية بدلًا من ضبط الحواشي فرادى باستخدام <code>[[CSS/padding-top|padding-top]]</code> و <code>[[CSS/padding-right|padding-right]]</code> و <code>[[CSS/padding-bottom|padding-bottom]]</code> و <code>[[CSS/padding-left|padding-left]]</code>. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 39: | سطر 24: | ||
|نسبة مئوية أو طول مطلق. | |نسبة مئوية أو طول مطلق. | ||
|} | |}<syntaxhighlight lang="css"> | ||
/* تطبيق الحواشي على الأطراف الأربعة */ | |||
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; | |||
</syntaxhighlight> | |||
== أمثلة == | == أمثلة == | ||
| سطر 83: | سطر 85: | ||
* عند تحديد أربع قيم، فستُطبّق القيم على الطرف العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الطرف العلوي ثم يستمر وفق اتجاه عقارب الساعة). | * عند تحديد أربع قيم، فستُطبّق القيم على الطرف العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الطرف العلوي ثم يستمر وفق اتجاه عقارب الساعة). | ||
=== | === <code>[[CSS/length|<length>]]</code> === | ||
تحديد قيمة الحاشية بالأطوال المطلقة، ولا يجوز أن تكون القيمة سالبةً. | تحديد قيمة الحاشية بالأطوال المطلقة، ولا يجوز أن تكون القيمة سالبةً. | ||
=== | === <code>[[CSS/percentage|<percentage>]]</code> === | ||
تحديد قيمة الحاشية كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي، ولا يجوز أن تكون القيمة سالبةً. | تحديد قيمة الحاشية كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي، ولا يجوز أن تكون القيمة سالبةً. | ||
مراجعة 19:35، 6 يوليو 2018
الخاصية padding المختصرة في CSS تضبط الحاشية (padding) في الأطراف الأربعة للعنصر، ويمكن استخدام هذه الخاصية بدلًا من ضبط الحواشي فرادى باستخدام padding-top و padding-right و padding-bottom و padding-left.
بطاقة الخاصية
| القيمة الابتدائية | لكل خاصية مختصرة:
|
|---|---|
| تُطبَّق على | جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية 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};
مصادر ومواصفات
- مسودة CSS Basic Box Model.
- مسودة CSS Transitions.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.