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

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

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

Syntax

cssselector {
  margin: value;
}

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

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

နမူနာ

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

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

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

Результат:

နမူနာ

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

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

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

Результат:

နမူနာ

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

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

css#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 အကွာအဝေး သတ်မှတ်ပေးပါမည်။

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

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

Результат:

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