خاصية هامش CSS
مثال
اضبط الهامش لجميع الجوانب الأربعة للعنصر <p> على 35 بكسل:
p {
margin: 35px;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تعيّن margin
الخاصية هوامش العنصر ، وهي خاصية اختصار للخصائص التالية:
إذا كانت خاصية الهامش تحتوي على أربع قيم:
- الهامش: 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.margin = "100 بكسل 50 بكسل" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
بنية CSS
margin: length|auto|initial|inherit;
قيم الملكية
Value | Description | Play it |
---|---|---|
length | Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a margin in percent of the width of the containing element | |
auto | The browser calculates a margin | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
طي الهامش
يتم أحيانًا طي الهوامش العلوية والسفلية للعناصر في هامش واحد يساوي أكبر الهامشين.
هذا لا يحدث على الهوامش الأفقية (اليسرى واليمنى)! الهوامش الرأسية (العلوية والسفلية) فقط!
ننظر إلى المثال التالي:
مثال
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
في المثال أعلاه ، يحتوي العنصر <p class = "a"> على هامش علوي وسفلي 30 بكسل. عنصر <p class = "b"> له هامش علوي وسفلي 20 بكسل.
هذا يعني أن الهامش الرأسي بين <p class = "a"> و <p class = "b"> يجب أن يكون 50 بكسل (30 بكسل + 20 بكسل). ولكن بسبب انهيار الهامش ، ينتهي الهامش الفعلي إلى 30 بكسل!
مزيد من الأمثلة
مثال
اضبط الهامش لعنصر <p> على 35 بكسل لأعلى ولأسفل ، و 70 بكسل لليمين واليسار:
p {
margin: 35px 70px;
}
مثال
اضبط هامش عنصر <p> على 35 بكسل للأعلى ، و 70 بكسل لليمين واليسار ، و 50 بكسل للأسفل:
p {
margin: 35px 70px 50px;
}
مثال
اضبط الهامش لعنصر <p> على 35 بكسل للأعلى ، و 70 بكسل لليمين ، و 50 بكسل للأسفل ، و 90 بكسل لليسار:
p {
margin: 35px 70px 50px 90px;
}
الصفحات ذات الصلة
دروس CSS: هامش CSS
دروس CSS: CSS Box Model
مرجع HTML DOM: خاصية الهامش