الفرق بين المراجعتين ل"CSS/padding"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 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> === |
تحديد قيمة الحاشية كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي، ولا يجوز أن تكون القيمة سالبةً. | تحديد قيمة الحاشية كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي، ولا يجوز أن تكون القيمة سالبةً. | ||
| سطر 93: | سطر 95: | ||
</syntaxhighlight> | </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> التي تصف كيف يجب أن يتموضع العنصر في المستند. | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
| سطر 99: | سطر 106: | ||
* مواصفة [http://www.w3.org/TR/CSS2/box.html#propdef-padding CSS Level 2 (Revision 1)]. | * مواصفة [http://www.w3.org/TR/CSS2/box.html#propdef-padding CSS Level 2 (Revision 1)]. | ||
* مواصفة [http://www.w3.org/TR/CSS1/#padding CSS Level 1]. | * مواصفة [http://www.w3.org/TR/CSS1/#padding CSS Level 1]. | ||
| − | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Property]] | + | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Box Model]] | + | [[تصنيف:CSS Box Model|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 19:16، 24 يوليو 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};
انظر أيضًا
- صفحة الخاصيات الفرعية التي تضبطها الخاصية 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.