خاصية الحشو النمط
مثال
اضبط المساحة المتروكة لعنصر <div>:
document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
التعريف والاستخدام
تحدد خاصية المساحة المتروكة الحشو الخاص بالعنصر أو إرجاعه.
يمكن أن تأخذ هذه الخاصية من قيمة واحدة إلى أربع قيم:
تقوم كل من خاصية الهامش وخاصية الحشو بإدراج مساحة حول عنصر. ومع ذلك ، فإن الاختلاف هو أن الهامش يُدرج المسافة حول الحد ، بينما تُدرج المساحة المتروكة المسافة داخل حدود العنصر.
- قيمة واحدة ، مثل: div {padding: 50px} - ستحتوي الأضلاع الأربعة على مساحة فارغة مقدارها 50 بكسل
- قيمتان ، مثل: div {padding: 50px 10px} - المساحة المتروكة العلوية والسفلية ستكون 50 بكسل ، أما المساحة المتروكة اليسرى واليمنى فستكون 10 بكسل
- ثلاث قيم ، مثل: div {padding: 50px 10px 20px} - المساحة المتروكة العلوية ستكون 50 بكسل ، المساحة المتروكة اليمنى واليسرى 10 بكسل ، المساحة المتروكة السفلية 20 بكسل
- أربع قيم ، مثل: div {padding: 50px 10px 20px 30px} - المساحة المتروكة العلوية ستكون 50 بكسل ، المساحة المتروكة اليمنى 10 بكسل ، المساحة المتروكة السفلية 20 بكسل ، المساحة المتروكة اليسرى 30 بكسل
دعم المتصفح
| Property | |||||
|---|---|---|---|---|---|
| padding | Yes | Yes | Yes | Yes | Yes |
بناء الجملة
إرجاع خاصية المساحة المتروكة:
object.style.padding
قم بتعيين خاصية المساحة المتروكة:
object.style.padding = "%|length|initial|inherit"
قيم الملكية
| Value | Description |
|---|---|
| % | Defines the padding in % of the width of the parent element |
| length | Defines the padding in length units |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
تفاصيل تقنية
| القيمة الافتراضية: | 0 |
|---|---|
| قيمة الإرجاع: | سلسلة ، تمثل المساحة المتروكة لعنصر |
| إصدار CSS | CSS1 |
مزيد من الأمثلة
مثال
تغيير المساحة المتروكة لجميع الجوانب الأربعة لعنصر <div> إلى "25 بكسل":
document.getElementById("myDiv").style.padding = "25px";
مثال
إعادة المساحة المتروكة لعنصر <div>:
alert(document.getElementById("myDiv").style.padding);
مثال
الفرق بين خاصية الهامش وخاصية الحشو:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
الصفحات ذات الصلة
دروس CSS: حشو CSS
مرجع CSS: خاصية padding
❮ نمط الكائن