خاصية هامش النمط
مثال
قم بتعيين الهوامش الأربعة لعنصر <div>:
document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
التعريف والاستخدام
تقوم خاصية الهامش بتعيين هوامش العنصر أو إرجاعها.
يمكن أن تأخذ هذه الخاصية من قيمة واحدة إلى أربع قيم:
- قيمة واحدة ، مثل: div {margin: 50px} - ستكون الهوامش الأربعة كلها 50 بكسل
- قيمتان ، مثل: div {margin: 50px 10px} - ستكون الهوامش العلوية والسفلية 50 بكسل ، والهوامش اليمنى واليسرى 10 بكسل
- ثلاث قيم ، مثل: div {margin: 50px 10px 20px} - سيكون الهامش العلوي 50 بكسل والهامش الأيسر والأيمن 10 بكسل والهامش السفلي 20 بكسل
- أربع قيم ، مثل: div {margin: 50px 10px 20px 30px} - الهامش العلوي سيكون 50 بكسل ، الهامش الأيمن 10 بكسل ، الهامش السفلي 20 بكسل ، الهامش الأيسر 30 بكسل
تقوم كل من خاصية الهامش وخاصية الحشو بإدراج مساحة حول عنصر. ومع ذلك ، فإن الاختلاف هو أن الهامش يُدرج المسافة حول الحد ، بينما تُدرج المساحة المتروكة المسافة داخل حدود العنصر.
دعم المتصفح
| Property | |||||
|---|---|---|---|---|---|
| margin | Yes | Yes | Yes | Yes | Yes |
بناء الجملة
إرجاع خاصية الهامش:
object.style.margin
قم بتعيين خاصية الهامش:
object.style.margin = "%|length|auto|initial|inherit"
قيم الملكية
| Value | Description |
|---|---|
| % | Defines the margins in % of the width of the parent element |
| length | Defines the margins in length units |
| auto | The browser sets the margins (all four margins will be equal) |
| 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.margin = "25px";
مثال
أعد هوامش عنصر <div>:
alert(document.getElementById("myDiv").style.margin);
مثال
الفرق بين خاصية الهامش وخاصية الحشو:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
الصفحات ذات الصلة
دروس CSS: هامش CSS
مرجع CSS: خاصية الهامش
❮ نمط الكائن