طي هامش CSS
في بعض الأحيان ينهار الهامشان في هامش واحد.
طي الهامش
يتم أحيانًا طي الهوامش العلوية والسفلية للعناصر في هامش واحد يساوي أكبر الهامشين.
هذا لا يحدث على الهامش الأيمن والأيسر! فقط الهوامش العلوية والسفلية!
ننظر إلى المثال التالي:
مثال
مظاهرة انهيار الهامش:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
في المثال أعلاه ، يحتوي العنصر <h1> على هامش سفلي قدره 50 بكسل بينما يحتوي العنصر <h2> على هامش علوي مضبوط على 20 بكسل.
يبدو أن الفطرة السليمة تشير إلى أن الهامش الرأسي بين <h1> و <h2> سيكون إجماليًا 70 بكسل (50 بكسل + 20 بكسل). ولكن بسبب انهيار الهامش ، ينتهي الهامش الفعلي إلى 50 بكسل.
جميع خصائص هامش CSS
Property | Description |
---|---|
margin | A shorthand property for setting the margin properties in one declaration |
margin-bottom | Sets the bottom margin of an element |
margin-left | Sets the left margin of an element |
margin-right | Sets the right margin of an element |
margin-top | Sets the top margin of an element |