CSS အနားသတ် ပိုင်ဆိုင်မှု
ဥပမာ
<p> ဒြပ်စင်တစ်ခု၏ လေးဘက်စလုံးအတွက် အနားသတ်ကို 35 ပစ်ဇယ်အဖြစ် သတ်မှတ်ပါ-
p {
margin: 35px;
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
margin
ပိုင်ဆိုင်မှုသည် ဒြပ်စင်တစ်ခုအတွက် အနားသတ်များကို သတ်မှတ်ပေးကာ အောက်ပါဂုဏ်သတ္တိများအတွက် လက်တိုပစ္စည်းတစ်ခုဖြစ်သည် ။
အနားသတ်ပိုင်ဆိုင်မှုတွင် တန်ဖိုးလေးခုရှိလျှင်-
- အနားသတ်- 10px 5px 15px 20px;
- ထိပ်တန်းအနားသတ်သည် 10px ဖြစ်သည်။
- ညာဘက်အနားသတ်သည် 5px ဖြစ်သည်။
- အောက်ခြေအနားသတ်သည် 15px ဖြစ်သည်။
- ဘယ်ဘက်အနားသတ်သည် 20px ဖြစ်သည်။
အနားသတ်ပိုင်ဆိုင်မှုတွင် တန်ဖိုးသုံးခုရှိလျှင်-
- အနားသတ်- 10px 5px 15px;
- ထိပ်တန်းအနားသတ်သည် 10px ဖြစ်သည်။
- ညာဘက်နှင့် ဘယ်ဘက်အနားသတ်များသည် 5px ဖြစ်သည်။
- အောက်ခြေအနားသတ်သည် 15px ဖြစ်သည်။
အနားသတ်ပိုင်ဆိုင်မှုတွင် တန်ဖိုးနှစ်ခုရှိလျှင်-
- အနားသတ်- 10px 5px;
- အပေါ်နှင့်အောက်ခြေအနားသတ်များသည် 10px ဖြစ်သည်။
- ညာဘက်နှင့် ဘယ်ဘက်အနားသတ်များသည် 5px ဖြစ်သည်။
အနားသတ်ပိုင်ဆိုင်မှုတွင် တန်ဖိုးတစ်ခုရှိလျှင်-
- အနားသတ်- 10px;
- အနားသတ် လေးခုလုံးသည် 10px ဖြစ်သည်။
မှတ်ချက်- အနုတ်တန်ဖိုးများကို ခွင့်ပြုထားသည်။
မူလတန်ဖိုး: | ၀ယ်တယ်။ |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | ဟုတ်ကဲ့၊ တစ်ဦးချင်းဂုဏ်သတ္တိများကိုကြည့်ပါ ။ ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS1 |
JavaScript syntax- | အရာဝတ္ထု .style.margin="100px 50px" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
CSS Syntax
margin: length|auto|initial|inherit;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description | Play it |
---|---|---|
length | Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a margin in percent of the width of the containing element | |
auto | The browser calculates a margin | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
အနားသတ်ကို ခေါက်သိမ်းပါ။
ဒြပ်စင်များ၏ အပေါ်နှင့်အောက်ခြေအနားသတ်များကို တစ်ခါတစ်ရံတွင် အနားသတ်နှစ်ခု၏ အကြီးဆုံးနှင့်ညီမျှသော တစ်ခုတည်းသောအနားသတ်အဖြစ်သို့ ပြိုကျသွားသည်။
၎င်းသည် အလျားလိုက် (ဘယ်နှင့်ညာ) အနားသတ်များတွင် မဖြစ်ပေါ်ပါ။ ဒေါင်လိုက် (အပေါ်နှင့်အောက်ခြေ) အနားသတ်များသာ။
အောက်ပါဥပမာကိုကြည့်ပါ-
ဥပမာ
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
အထက်နမူနာတွင်၊ <p class="a">ဒြပ်စင်တွင် 30px ၏ အပေါ်နှင့် အောက်အနားသတ် ရှိသည်။ <p class="b">ဒြပ်စင်တွင် အပေါ်နှင့်အောက်ခြေအနားသတ် 20px ရှိသည်။
ဆိုလိုသည်မှာ <p class="a"> နှင့် <p class="b"> အကြား ဒေါင်လိုက်အနားသတ်သည် 50px (30px + 20px) ဖြစ်သင့်သည်။ သို့သော် အနားသတ်ပြိုကျမှုကြောင့်၊ အမှန်တကယ်အနားသတ်သည် 30px ဖြစ်လာသည်။
နောက်ထပ် ဥပမာများ
ဥပမာ
<p> ဒြပ်စင်တစ်ခုအတွက် အနားသတ်ကို အပေါ်နှင့်အောက်ခြေအတွက် 35 ပစ်ဇယ်နှင့် ညာဘက်နှင့် ဘယ်ဘက်အတွက် 70 ပစ်ဇယ်အဖြစ် သတ်မှတ်ပါ-
p {
margin: 35px 70px;
}
ဥပမာ
<p> ဒြပ်စင်အတွက် အနားသတ်ကို ထိပ်အတွက် 35 ပစ်ဇယ်၊ ညာဘက်နှင့် ဘယ်ဘက်အတွက် 70 ပစ်ဇယ်နှင့် အောက်ခြေအတွက် 50 ပစ်ဇယ်အဖြစ် သတ်မှတ်ပါ-
p {
margin: 35px 70px 50px;
}
ဥပမာ
<p> ဒြပ်စင်အတွက် အနားသတ်ကို ထိပ်အတွက် 35 ပစ်ဇယ်၊ ညာဘက်အတွက် 70 ပစ်ဇယ်၊ အောက်ခြေအတွက် 50 ပစ်ဇယ်နှင့် ဘယ်ဘက်အတွက် 90 ပစ်ဇယ်သို့ သတ်မှတ်ပါ-
p {
margin: 35px 70px 50px 90px;
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Margin
CSS သင်ခန်းစာ- CSS Box မော်ဒယ်
HTML DOM ရည်ညွှန်းချက်- အနားသတ် ပိုင်ဆိုင်မှု