خاصية الحشو CSS
مثال
اضبط المساحة المتروكة لجميع الجوانب الأربعة للعنصر <p> على 35 بكسل:
p {
padding: 35px;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
المساحة المتروكة للعنصر هي المسافة بين محتواه وحدوده.
الخاصية هي paddingخاصية مختصرة من أجل:
ملاحظة: يؤدي الحشو إلى إنشاء مساحة إضافية داخل العنصر ، بينما ينشئ الهامش مساحة إضافية حول العنصر.
يمكن أن يكون لهذه الخاصية من واحد إلى أربع قيم.
إذا كانت خاصية المساحة المتروكة تحتوي على أربع قيم:
- الحشو: 10 بكسل 5 بكسل 15 بكسل 20 بكسل ؛
- المساحة المتروكة لأعلى 10 بكسل
- المساحة المتروكة اليمنى 5 بكسل
- المساحة المتروكة في الجزء السفلي هي 15 بكسل
- المساحة المتروكة لليسار 20 بكسل
إذا كانت خاصية المساحة المتروكة تحتوي على ثلاث قيم:
- الحشو: 10 بكسل 5 بكسل 15 بكسل ؛
- المساحة المتروكة لأعلى 10 بكسل
- المساحة المتروكة اليمنى واليسرى 5 بكسل
- المساحة المتروكة في الجزء السفلي هي 15 بكسل
إذا كانت خاصية المساحة المتروكة تحتوي على قيمتين:
- الحشو: 10 بكسل 5 بكسل ؛
- حجم المساحة المتروكة لأعلى ولأسفل 10 بكسل
- المساحة المتروكة اليمنى واليسرى 5 بكسل
إذا كانت خاصية المساحة المتروكة لها قيمة واحدة:
- الحشو: 10 بكسل ؛
- جميع الحشوات الأربعة 10 بكسل
ملاحظة: القيم السلبية غير مسموح بها.
| القيمة الافتراضية: | 0 |
|---|---|
| وارث: | رقم |
| متحرك: | نعم ، انظر الخصائص الفردية . اقرأ عن animatable |
| الإصدار: | CSS1 |
| بناء جملة JavaScript: | الكائن .style.padding = "100 بكسل 20 بكسل" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
| Property | |||||
|---|---|---|---|---|---|
| padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
بنية CSS
padding: length|initial|inherit;
قيم الملكية
| Value | Description | Play it |
|---|---|---|
| length | Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units | |
| % | Specifies the padding in percent of the width of the containing element | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
اضبط المساحة المتروكة لعنصر <p> على 35 بكسل للأعلى والأسفل ، وعلى 70 بكسل لليمين واليسار:
p {
padding: 35px 70px;
}
مثال
اضبط المساحة المتروكة لعنصر <p> على 35 بكسل للأعلى ، و 70 بكسل لليمين واليسار ، و 50 بكسل للأسفل:
p {
padding: 35px 70px 50px;
}
مثال
اضبط المساحة المتروكة لعنصر <p> على 35 بكسل للأعلى ، و 70 بكسل لليمين ، و 50 بكسل للأسفل ، و 90 بكسل لليسار:
p {
padding: 35px 70px 50px 90px;
}
الصفحات ذات الصلة
برنامج CSS التعليمي: CSS Padding
دروس CSS: CSS Box Model
مرجع DOM HTML: خاصية المساحة المتروكة