Margin Collapsing
HTML မှာ Element တွေကြားက နေရာလွတ် (Margin) တွေ တစ်ခုနဲ့တစ်ခု ပေါင်းစည်းသွားတဲ့ ဖြစ်စဉ်ကို Margin Collapsing လို့ ခေါ်ပါတယ်။ ဒါဟာ Web Design စလုပ်ခါစ သူငယ်ချင်းတို့အတွက် တော်တော်လေး ခေါင်းစားစေတဲ့ ကိစ္စတစ်ခုပါ။
Heading tags (<h1> ကနေ <h6>) တွေမှာ ဒီဖြစ်စဉ်က ပိုသိသာပါတယ်။ ဘာလို့လဲဆိုတာ အောက်မှာ အသေးစိတ် ကြည့်ကြရအောင်။
Margin Collapsing ဆိုတာ ဘာလဲ?
ရိုးရိုးရှင်းရှင်း ပြောရရင် Element နှစ်ခု တစ်ခုပေါ်တစ်ခု ဆင့်နေတဲ့အချိန်မှာ သူတို့ရဲ့ Top margin နဲ့ Bottom margin တွေဟာ တစ်ခုပေါ်တစ်ခု ထပ်သွားပြီး အကြီးဆုံး Margin တန်ဖိုးတစ်ခုတည်း အဖြစ် ပြောင်းလဲသွားတာကို ဆိုလိုတာပါ။
ဥပမာ- <h1> ရဲ့ အောက်ဘက် Margin က 50px ရှိပြီး၊ သူ့အောက်က <p> ရဲ့ အပေါ်ဘက် Margin က 30px ရှိတယ်ဆိုပါစို့။ သူတို့ကြားက နေရာလွတ်ဟာ ဖြစ်မလာဘဲ၊ အကြီးဆုံးတန်ဖိုးဖြစ်တဲ့ 50px ပဲ ဖြစ်နေတတ်ပါတယ်။
ဘယ်လို အခြေအနေမျိုးမှာ Margin Collapsing ဖြစ်တတ်သလဲ?
ဒီဖြစ်စဉ်က အဓိကအားဖြင့် အခြေအနေ (၃) မျိုးမှာ ဖြစ်ပါတယ်။
၁။ Adjacent Siblings (ဘေးချင်းကပ် အိမ်နီးချင်းများ)
ဒါက အဖြစ်အများဆုံးပါ။ Element တစ်ခုရဲ့ bottom margin နဲ့ နောက်တစ်ခုရဲ့ top margin တို့ ထိတွေ့တဲ့အခါ ဖြစ်ပေါ်ပါတယ်။ ဥပမာ- Heading တစ်ခုနဲ့ နောက်ကလိုက်လာတဲ့ Paragraph အကြားမှာပါ။
၂။ Parent and First/Last Child (မိဘနဲ့ သားသမီး)
အကယ်၍ Parent element မှာ padding တို့၊ border တို့ မရှိဘူးဆိုရင်၊ သူ့ရဲ့ အထဲက ပထမဆုံး child element ရဲ့ margin ဟာ အပြင်က parent ရဲ့ margin နဲ့ သွားပေါင်းပါတယ်။ ဒါကြောင့် Heading တစ်ခုကို <div> ထဲ ထည့်ထားပေမဲ့ <div> ရဲ့ အပေါ်မှာ နေရာလွတ်ကြီး ဖြစ်နေတာမျိုး ကြုံဖူးကြမှာပါ။
၃။ Empty Blocks (ဗလာဖြစ်နေသော Block များ)
Element တစ်ခုမှာ content လည်းမရှိ၊ height လည်း မရှိ၊ padding/border လည်း မရှိဘူးဆိုရင် သူ့ရဲ့ top margin နဲ့ bottom margin တို့ ပေါင်းစည်းသွားပါတယ်။
ဒါကို ဘယ်လို ဖြေရှင်းမလဲ (သို့) ရှောင်လွဲမလဲ?
Margin collapse ဖြစ်တာကို မလိုချင်ဘူးဆိုရင် အောက်ပါနည်းလမ်းလေးတွေ သုံးလို့ရပါတယ်။
Padding သုံးပါ: Margin အစား
paddingကို သုံးရင် collapse မဖြစ်ပါဘူး။Border ထည့်ပါ: Parent နဲ့ Child ကြားမှာ 1px လောက်ရှိတဲ့ border (ဥပမာ
border: 1px solid transparent;) ထည့်လိုက်ရင် margin collapse မဖြစ်တော့ပါဘူး။Flexbox သို့မဟုတ် Grid သုံးပါ:
display: flex;ဒါမှမဟုတ်display: grid;သုံးထားတဲ့ container ထဲက element တွေကြားမှာ margin collapse မဖြစ်ပါဘူး။ ဒါက ခေတ်သစ် Web design မှာ အကောင်းဆုံး ဖြေရှင်းနည်းပါ။Overflow: Parent element မှာ
overflow: auto;သို့မဟုတ်overflow: hidden;ပေးထားရင်လည်း collapse ဖြစ်တာ ရပ်သွားပါလိမ့်မယ်။
အနှစ်ချုပ်
Margin collapsing ဆိုတာ CSS ရဲ့ အမှား (Bug) မဟုတ်ဘဲ Typography အရ စာသားတွေကြား နေရာလွတ် အလွန်အကျွံ မဖြစ်အောင် ဖန်တီးထားတဲ့ feature တစ်ခုသာ ဖြစ်ပါတယ်။ ဒါကို နားလည်ထားရင် Layout ချတဲ့အခါမှာ ပိုပြီး တိကျတဲ့ Design တွေကို ဖန်တီးလာနိုင်မှာပါ။
Last updated