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