خاصية CSS margin-top
مثال
اضبط الهامش العلوي لعنصر <p> على 25 بكسل:
p.ex1 {
margin-top: 25px;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تحدد الخاصية الهامش margin-top
العلوي للعنصر.
ملاحظة: القيم السلبية مسموح بها.
القيمة الافتراضية: | 0 |
---|---|
وارث: | رقم |
متحرك: | نعم ، انظر الخصائص الفردية . اقرأ عن animatable |
الإصدار: | CSS1 |
بناء جملة JavaScript: | الكائن .style.marginTop = "100px" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
margin-top | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
بنية CSS
margin-top: length|auto|initial|inherit;
قيم الملكية
Value | Description | Play it |
---|---|---|
length | Specifies a fixed top margin in px, pt, cm, etc. Default value is 0px. Negative values are allowed. Read about length units | |
% | Specifies a top margin in percent of the width of the containing element | |
auto | The browser calculates a top 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> على 10٪ من عرض الحاوية:
p.ex1 {
margin-top: 10%;
}
مثال
اضبط الهامش العلوي لعنصر <p> على 2 م:
p.ex1 {
margin-top: 2em;
}
الصفحات ذات الصلة
دروس CSS: هامش CSS
مرجع HTML DOM: خاصية marginTop