CSS တွင် ဘလောက်အစုအဝေးများ ညှိခြင်း

margin ဂုဏ်သတ္တိသည် အကွာအဝေးများ သတ်မှတ်ရန်အတွက်သာမက ဘလောက်အစုအဝေးများကို ဗဟိုချက်ညှိရန်အတွက်လည်း အသုံးပြုပါသည်။ ၎င်းအတွက် ညာဘက်နှင့် ဘယ်ဘက် အကွာအဝေးများကို auto တန်ဖိုးအဖြစ် သတ်မှတ်သင့်သည်။

အောက်ပါဥပမာတွင် အတွင်းဘလောက်သည် အလယ်ဗဟိုတွင် ရပ်တည်သွားပါမည်။

html<div class="parent">
  <div class="child"></div>
</div>

css.parent {
  border: 1px solid red;
}

.child {
  height: 100px;
  width: 200px;
  border: 1px solid green;
  margin: 10px auto;
}

Результат:

သတိပြုပါ၊ ဤနည်းဖြင့် ဘလောက်အစုအဝေးများကိုသာ၊ အလျားလိုက်ညှိခြင်းကိုသာ နှင့် ၎င်းတို့အတွက် အကျယ်သတ်မှတ်ထားမှသာ ဗဟိုချက်ညှိနိုင်ပါသည်။

အကယ်၍ အပေါ်နှင့် အောက်အကွာအဝေး margin များ ကွဲပြားစွာလိုအပ်ပါက ဤကဲ့သို့ ရေးသားနိုင်ပါသည်။

css.child {
  margin: 30px auto 10px auto;
}

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

css.child {
  margin: 30px auto 10px;
}