margin ပိုင်ဆိုင်မှု

margin ပိုင်ဆိုင်မှုသည် element ၏ အပြင်ဘက် အကွာအဝေးကို သတ်မှတ်ပေးပါသည်။ ပိုင်ဆိုင်မှု၏ တန်ဖိုးများအဖြစ် မည်သည့် အရွယ်အစားများအတွက် ယူနစ် မဆိုသော်လည်းကောင်း၊ သို့မဟုတ် ဘရောက်ဆာကို element ၏ အကွာအဝေးကို ကိုယ်တိုင် တွက်ချက်ခွင့်ပေးသည့် သော့ချက်စကားလုံး ပိုင်ဆိုင်မှု auto ကိုသော်လည်းကောင်း အသုံးပြုနိုင်ပါသည်။ စံထားသည့်အတိုင်း ဘရောက်ဆာတိုင်းသည် element များကို မတူညီသော အကွာအဝေးများ ထည့်ပေးနိုင်ပါသည်။

ဤပိုင်ဆိုင်မှုသည် margin-top, margin-right, margin-bottom, margin-left ပိုင်ဆိုင်မှုများအတွက် အတိုကောက် ဖြစ်ပါသည်။

Syntax

selector {
	margin: value;
}

တန်ဖိုးအရေအတွက်

margin ပိုင်ဆိုင်မှုသည် 1, 2, 3 သို့မဟုတ် 4 တန်ဖိုးများကို လက်ခံပြီး ၎င်းတို့ကို ကြားခံနေရာ (space) ဖြင့် ခွဲခြားရေးသားရပါမည်။

အရေအတွက်	ဖော်ပြချက်
`1`	တစ်ခုတည်းသော တန်ဖိုးသည် element ၏ အားလုံးသောဘက်များမှ အကွာအဝေးကို သတ်မှတ်ပေးပါသည်။
`2`	ပထမတန်ဖိုးသည် အပေါ်နှင့် အောက်ဘက်မှ အကွာအဝေးကို သတ်မှတ်ပေးပြီး၊ ဒုတိယတန်ဖိုးသည် ညာဘက်နှင့် ဘယ်ဘက်မှ အကွာအဝေးကို သတ်မှတ်ပေးပါသည်။
`3`	ပထမတန်ဖိုးသည် အပေါ်ဘက်မှ အကွာအဝေးကို သတ်မှတ်ပေးပြီး၊ ဒုတိယတန်ဖိုးသည် ညာဘက်နှင့် ဘယ်ဘက်မှ အကွာအဝေးကို သတ်မှတ်ပေးကာ၊ တတိယတန်ဖိုးသည် အောက်ဘက်မှ အကွာအဝေးကို သတ်မှတ်ပေးပါသည်။
`4`	ပထမတန်ဖိုးသည် အပေါ်ဘက်မှ အကွာအဝေးကို သတ်မှတ်ပေးပြီး၊ ဒုတိယတန်ဖိုးသည် ညာဘက်မှ အကွာအဝေးကို သတ်မှတ်ပေးကာ၊ တတိယတန်ဖိုးသည် အောက်ဘက်မှ အကွာအဝေးကို သတ်မှတ်ပေးပြီး၊ စတုတ္ထတန်ဖိုးသည် ဘယ်ဘက်မှ အကွာအဝေးကို သတ်မှတ်ပေးပါသည်။

နမူနာ

ယခု ကျွန်ုပ်တို့တွင် အကွာအဝေးမရှိသော block တစ်ခု ရှိပါမည်။

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 0;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

နမူနာ

ယခု block အား 10px အကွာအဝေး သတ်မှတ်ပေးပါမည်။

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

နမူနာ

Block အား အပေါ်နှင့် အောက်ဘက်တွင် 10px နှင့် ဘယ်ဘက်နှင့် ညာဘက်တွင် 20px အကွာအဝေး သတ်မှတ်ပေးပါမည်။

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px 20px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

နမူနာ

Block အား အပေါ်ဘက်တွင် 5px အကွာအဝေး၊ ညာဘက်တွင် 15px အကွာအဝေး၊ အောက်ဘက်တွင် 25px အကွာအဝေးနှင့် ဘယ်ဘက်တွင် 35px အကွာအဝေး သတ်မှတ်ပေးပါမည်။

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 5px 15px 25px 35px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

ဤအကြောင်းကိုလည်း ကြည့်ပါ

padding ပိုင်ဆိုင်မှု,
အတွင်းဘက် အကွာအဝေးကို သတ်မှတ်ပေးသည်