CSS အနားသတ်များ
အနားသတ်များကို သတ်မှတ်ထားသောဘောင်များအပြင်ဘက်ရှိ ဒြပ်စင်များအနီးရှိ နေရာလွတ်ဖန်တီးရန် အသုံးပြုသည်။
CSS အနားသတ်များ
margin
သတ်မှတ်ထားသော နယ်နိမိတ်များအပြင် မည်သည့်ဒြပ်စင်များအနီးရှိ နေရာလွတ်များ ဖန်တီးရန် CSS ဂုဏ်သတ္တိများကို အသုံးပြုသည်။
CSS ဖြင့်၊ သင်သည် အနားသတ်များကို အပြည့်အဝ ထိန်းချုပ်နိုင်သည်။ ဒြပ်စင်တစ်ခု၏ ဘေးတစ်ဖက်စီအတွက် အနားသတ်သတ်မှတ်ခြင်းအတွက် ဂုဏ်သတ္တိများ (အပေါ်၊ ညာ၊ အောက်နှင့် ဘယ်)။
အနားသတ် - တစ်ဦးချင်းဘေးများ
CSS တွင် ဒြပ်စင်တစ်ခု၏ ဘေးတစ်ဖက်စီအတွက် အနားသတ်သတ်မှတ်ခြင်းအတွက် ဂုဏ်သတ္တိများ ရှိသည်-
margin-top
margin-right
margin-bottom
margin-left
အနားသတ်ဂုဏ်သတ္တိများအားလုံးတွင် အောက်ပါတန်ဖိုးများ ရှိနိုင်သည်-
- အလိုအလျောက် - ဘရောက်ဆာသည် အနားသတ်ကို တွက်ချက်သည်။
- အရှည် - အနားသတ်ကို px၊ pt၊ cm စသည်ဖြင့် သတ်မှတ်သည်။
- % - ပါဝင်သောဒြပ်စင်၏ အကျယ်၏ % တွင် အနားသတ်ကို သတ်မှတ်သည်။
- အမွေဆက်ခံခြင်း - အနားသတ်ကို ပင်မဒြပ်စင်မှ အမွေဆက်ခံသင့်သည်ဟု သတ်မှတ်သည်။
အကြံပြုချက်- အနုတ်တန်ဖိုးများကို ခွင့်ပြုထားသည်။
ဥပမာ
<p> ဒြပ်စင်တစ်ခု၏ လေးဘက်စလုံးအတွက် မတူညီသောအနားသတ်များကို သတ်မှတ်ပါ-
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin - Shorthand Property
ကုဒ်ကို အတိုချုံ့ရန်၊ အနားသတ်ဂုဏ်သတ္တိများအားလုံးကို ပိုင်ဆိုင်မှုတစ်ခုတည်းတွင် သတ်မှတ်နိုင်သည်။
margin
ပိုင်ဆိုင်မှုသည် အောက်ဖော်ပြပါ တစ်ဦးချင်း အနားသတ်ဂုဏ်သတ္တိများအတွက် လက်တိုပိုင်ဆိုင်မှုတစ်ခုဖြစ်သည် -
margin-top
margin-right
margin-bottom
margin-left
ဒီတော့ ဒါက ဘယ်လိုအလုပ်လုပ်သလဲ၊
margin
ပိုင်ဆိုင်မှုတွင် တန်ဖိုးလေးမျိုး ရှိလျှင် -
- အနားသတ်- 25px 50px 75px 100px;
- ထိပ်တန်းအနားသတ်သည် 25px ဖြစ်သည်။
- ညာဘက်အနားသတ်သည် 50px ဖြစ်သည်။
- အောက်ခြေအနားသတ်သည် 75px ဖြစ်သည်။
- ဘယ်ဘက်အနားသတ်သည် 100px ဖြစ်သည်။
ဥပမာ
တန်ဖိုးလေးခုဖြင့် အနားသတ်အတိုကောက်ပိုင်ဆိုင်မှုကို အသုံးပြုပါ-
p {
margin: 25px 50px 75px 100px;
}
margin
ပစ္စည်းတွင် တန်ဖိုးသုံးမျိုး ရှိလျှင်
- အနားသတ်- 25px 50px 75px;
- ထိပ်တန်းအနားသတ်သည် 25px ဖြစ်သည်။
- ညာဘက်နှင့် ဘယ်ဘက်အနားသတ်များသည် 50px ဖြစ်သည်။
- အောက်ခြေအနားသတ်သည် 75px ဖြစ်သည်။
ဥပမာ
တန်ဖိုးသုံးမျိုးဖြင့် အနားသတ်အတိုကောက်ပိုင်ဆိုင်မှုကို အသုံးပြုပါ-
p {
margin: 25px 50px 75px;
}
margin
အိမ်ခြံမြေတွင် တန်ဖိုးနှစ်ခု ရှိလျှင် -
- အနားသတ်- 25px 50px;
- အပေါ်နှင့်အောက်ခြေအနားသတ်များသည် 25px ဖြစ်သည်။
- ညာဘက်နှင့် ဘယ်ဘက်အနားသတ်များသည် 50px ဖြစ်သည်။
ဥပမာ
တန်ဖိုးနှစ်ခုဖြင့် အနားသတ်အတိုကောက်ပိုင်ဆိုင်မှုကို အသုံးပြုပါ-
p {
margin: 25px 50px;
}
margin
ပစ္စည်းသည် တန်ဖိုးတစ်ခုရှိလျှင် -
- အနားသတ်- 25px;
- အနားသတ်လေးခုလုံးသည် 25px ဖြစ်သည်။
ဥပမာ
တန်ဖိုးတစ်ခုဖြင့်အနားသတ်အတိုကောက်ပိုင်ဆိုင်မှုကိုသုံးပါ-
p {
margin: 25px;
}
အလိုအလျောက်တန်ဖိုး
အနားသတ်ပိုင်ဆိုင်မှုကို auto
၎င်း၏ကွန်တိန်နာအတွင်း ဒြပ်စင်ကို အလျားလိုက်ဗဟိုပြုရန် သင်သတ်မှတ်နိုင်သည်။
ထို့နောက် ဒြပ်စင်သည် သတ်မှတ်ထားသော အကျယ်ကို ယူမည်ဖြစ်ပြီး ကျန်နေရာအား ဘယ်နှင့်ညာ အနားသတ်များကြား အညီအမျှ ခွဲသွားမည်ဖြစ်သည်။
ဥပမာ
အနားသတ်ကို သုံးပါ- အော်တို-
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
အမွေတန်ဖိုး
ဤဥပမာသည် <p class="ex1">ဒြပ်စင်၏ ဘယ်ဘက်အနားသတ်ကို ပင်မဒြပ်စင် (<div>) မှ အမွေဆက်ခံနိုင်စေသည်-
ဥပမာ
အမွေတန်ဖိုးကို အသုံးပြုခြင်း-
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}