Margin & Padding

ဘယ်ဟာ သုံးရမလဲ?

Margin နဲ့ Padding က တစ်ချက်ကြည့်လိုက်ရင် ဆင်တူသလိုလို ထင်ရပေမဲ့ တကယ်တော့ လုံးဝ မတူပါဘူး။ ဥပမာပေးရရင် - Padding ဆိုတာက ခင်ဗျားရဲ့ အိမ်ခြံစည်းရိုး အတွင်းဘက် က မြေကွက်လပ်နဲ့ တူပါတယ်။ Margin ဆိုတာကကျတော့ ခင်ဗျားရဲ့ အိမ်ခြံစည်းရိုး အပြင်ဘက် (တခြားအိမ်တွေနဲ့ ကြား) က လမ်းကြားနဲ့ တူပါတယ် ခင်ဗျာ။

Padding (အတွင်းအကွာအဝေး)

သူက Content နဲ့ Border ကြားမှာရှိတဲ့ နေရာလွတ် ဖြစ်ပါတယ်။ အကယ်၍ Background Color သာ ထည့်ထားမယ်ဆိုရင် အဲဒီ Padding နေရာအထိပါ အရောင် ဝင်သွားမှာ ဖြစ်ပါတယ်။

.button {
  padding: 10px 20px; /* အပေါ်အောက် 10px, ဘယ်ညာ 20px */
  background-color: blue;
  color: white;
}

Margin (အပြင်အကွာအဝေး)

သူကတော့ Element တစ်ခုနဲ့ နောက် Element တစ်ခု ကြားမှာရှိတဲ့ နေရာလွတ် ဖြစ်ပါတယ်။ Background Color ထည့်ရင်တောင် သူက အရောင်မဝင်ပါဘူး (အဖြူထည် နေရာလွတ် အနေနဲ့ပဲ ရှိနေမှာပါ)။

.card {
  margin-bottom: 20px; /* အောက်ဘက်မှာ 20px ခွာမယ် */
}

ရေးနည်း အတိုကောက် (Shorthand)

Margin သို့မဟုတ် Padding မှာ တန်ဖိုး (၄) ခုကို တစ်တန်းတည်း ပေးမယ်ဆိုရင်၊ နာရီလက်တံ လည်တဲ့အတိုင်း (အပေါ်၊ ညာ၊ အောက်၊ ဘယ်) အစဉ်လိုက် အလုပ်လုပ်သွားမှာ ဖြစ်ပါတယ်။

/* Top Right Bottom Left */
margin: 10px 20px 15px 5px;

/* Top/Bottom | Left/Right */
padding: 10px 20px;

/* All sides */
margin: 10px;

Auto Margin (အလယ်ပို့ခြင်း)

Block Element တစ်ခုကို ဘယ်ညာ အလယ်တည့်တည့် (Center) ရောက်သွားစေချင်တယ်ဆိုရင်တော့ margin: 0 auto; ကို အသုံးပြုနိုင်ပါတယ် ခင်ဗျာ။

.container {
  width: 800px;
  margin: 0 auto; /* အပေါ်အောက် 0, ဘယ်ညာ Auto (အလယ်ရောက်မယ်) */
}