CSS Padding
သတ်မှတ်ထားသောဘောင်များအတွင်း၊ ဒြပ်စင်တစ်ခု၏အကြောင်းအရာတစ်ဝိုက်တွင် နေရာလွတ်ဖန်တီးရန် Padding ကိုအသုံးပြုသည်။
CSS Padding
padding
သတ်မှတ်ထားသောဘောင်များအတွင်း၊ ဒြပ်စင်တစ်ခု၏အကြောင်းအရာတစ်ဝိုက်ရှိ နေရာလွတ်များကို ဖန်တီးရန်အတွက် CSS ဂုဏ်သတ္တိများကို အသုံးပြုသည်။
CSS ဖြင့်၊ သင်သည် padding ကိုအပြည့်အဝထိန်းချုပ်နိုင်သည်။ ဒြပ်စင်တစ်ခုစီ၏ ဘေးတစ်ဖက်စီအတွက် padding သတ်မှတ်ခြင်းအတွက် ဂုဏ်သတ္တိများ (အပေါ်၊ ညာဘက်၊ အောက်နှင့် ဘယ်)။
Padding - တစ်ဦးချင်းဘေးများ
CSS တွင် ဒြပ်စင်တစ်ခု၏ ဘေးတစ်ဖက်စီအတွက် padding ကို သတ်မှတ်ရန် ဂုဏ်သတ္တိများ ရှိသည်။
padding-top
padding-right
padding-bottom
padding-left
padding ဂုဏ်သတ္တိများအားလုံးတွင် အောက်ပါတန်ဖိုးများ ရှိနိုင်ပါသည်။
- အရှည် - px၊ pt၊ cm စသည်ဖြင့် အကွက်တစ်ခုကို သတ်မှတ်သည်။
- % - ပါဝင်သောဒြပ်စင်၏ အကျယ်အဝန်း၏ % တွင် အကွက်တစ်ခုကို သတ်မှတ်သည်။
- အမွေဆက်ခံခြင်း - padding ကို ပင်မဒြပ်စင်မှ အမွေဆက်ခံသင့်သည်ဟု သတ်မှတ်သည်။
မှတ်ချက်- အနုတ်တန်ဖိုးများကို ခွင့်မပြုပါ။
ဥပမာ
<div> ဒြပ်စင်တစ်ခု၏ လေးဘက်စလုံးအတွက် မတူညီသော padding ကို သတ်မှတ်ပါ-
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Shorthand Property
ကုဒ်ကို အတိုချုံ့ရန်၊ ပစ္စည်တစ်ခုတွင် padding properties အားလုံးကို သတ်မှတ်နိုင်သည်။
padding
ပိုင်ဆိုင်မှုသည် အောက်ဖော်ပြပါ ကွက်လပ်တစ်ခုချင်းစီအတွက် လက်တိုပိုင်ဆိုင်မှုတစ်ခုဖြစ်သည် -
padding-top
padding-right
padding-bottom
padding-left
ဒီတော့ ဒါက ဘယ်လိုအလုပ်လုပ်သလဲ၊
padding
ပိုင်ဆိုင်မှုတွင် တန်ဖိုးလေးမျိုး ရှိလျှင် -
- padding: 25px 50px 75px 100px;
- အပေါ်ဆုံး padding သည် 25px ဖြစ်သည်။
- ညာဘက်အကွက်သည် 50px ဖြစ်သည်။
- အောက်ခြေ padding သည် 75px ဖြစ်သည်။
- ဘယ်ဘက်အကွက်သည် 100px ဖြစ်သည်။
ဥပမာ
တန်ဖိုးလေးခုဖြင့် padding shorthand ပိုင်ဆိုင်မှုကို အသုံးပြုပါ-
div {
padding: 25px 50px 75px 100px;
}
padding
ပစ္စည်းတွင် တန်ဖိုးသုံးမျိုး ရှိလျှင်
- padding: 25px 50px 75px;
- အပေါ်ဆုံး padding သည် 25px ဖြစ်သည်။
- ညာဘက်နှင့် ဘယ်ဘက်အကွက်များသည် 50px ဖြစ်သည်။
- အောက်ခြေ padding သည် 75px ဖြစ်သည်။
ဥပမာ
တန်ဖိုးသုံးခုဖြင့် padding shorthand ပိုင်ဆိုင်မှုကို အသုံးပြုပါ-
div {
padding: 25px 50px 75px;
}
padding
အိမ်ခြံမြေတွင် တန်ဖိုးနှစ်ခု ရှိလျှင် -
- padding: 25px 50px;
- အပေါ်နှင့်အောက်ခြေအကွက်များသည် 25px ဖြစ်သည်။
- ညာဘက်နှင့် ဘယ်ဘက်အကွက်များသည် 50px ဖြစ်သည်။
ဥပမာ
တန်ဖိုးနှစ်ခုဖြင့် padding shorthand ပိုင်ဆိုင်မှုကို အသုံးပြုပါ-
div {
padding: 25px 50px;
}
padding
ပစ္စည်းသည် တန်ဖိုးတစ်ခုရှိလျှင် -
- padding: 25px;
- padding လေးခုလုံးသည် 25px ဖြစ်သည်။
ဥပမာ
တန်ဖိုးတစ်ခုဖြင့် padding အတိုကောက်ပိုင်ဆိုင်မှုကို အသုံးပြုပါ-
div {
padding: 25px;
}
Padding နှင့် Element Width
CSS width
ပိုင်ဆိုင်မှုသည် ဒြပ်စင်၏ အကြောင်းအရာဧရိယာ၏ အကျယ်ကို သတ်မှတ်သည်။ အကြောင်းအရာဧရိယာသည် ဒြပ်စင်တစ်ခု၏ padding၊ ဘောင်နှင့် အနားသတ်အတွင်းပိုင်း ( အကွက်ပုံစံ )။
ထို့ကြောင့်၊ ဒြပ်စင်တစ်ခုတွင် သတ်မှတ်ထားသော width ရှိပါက၊ ထိုဒြပ်စင်သို့ထည့်ထားသော padding ကို element ၏စုစုပေါင်း width သို့ပေါင်းထည့်မည်ဖြစ်သည်။ ဒါက မလိုလားအပ်တဲ့ ရလဒ်ဖြစ်တတ်တယ်။
ဥပမာ
ဤတွင်၊ <div> ဒြပ်စင်အား အကျယ် 300px ပေးထားသည်။ သို့သော်၊ <div> ဒြပ်စင်၏ အမှန်တကယ် အကျယ်သည် 350px (ဘယ်ဘက် padding ၏ 300px + 25px + ညာဘက် padding ၏ 25px ဖြစ်လိမ့်မည်)။
div {
width: 300px;
padding: 25px;
}
အကျယ်ကို 300px တွင်ထားရန်၊ padding မည်မျှပင်ရှိစေကာမူ
box-sizing
ပိုင်ဆိုင်မှုကို သင်သုံးနိုင်သည်။ ၎င်းသည် ဒြပ်စင်အား ၎င်း၏ အမှန်တကယ် အကျယ်ကို ထိန်းသိမ်းထားရန် ဖြစ်စေသည်။ padding ကို တိုးမြှင့်ပါက ရရှိနိုင်သော အကြောင်းအရာ နေရာလွတ် လျော့နည်းသွားပါမည်။
ဥပမာ
အကွက်ပမာဏ မည်မျှပင်ဖြစ်စေ အကျယ်ကို 300px တွင်ထားရန် အကွက်အရွယ်အစားကို အသုံးပြုပါ-
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
နောက်ထပ် ဥပမာများ
ပါ ဤဥပမာသည် <p> ဒြပ်စင်တစ်ခု၏ ဘယ်ဘက်အကွက်ကို သတ်မှတ်နည်းကို သရုပ်ပြသည်။
သတ်မှတ်ခြင်း ဤဥပမာသည် <p> element တစ်ခု၏ မှန်ကန်သော padding ကို သတ်မှတ်ပုံအား သရုပ်ပြသည်။
ပါ ဤဥပမာသည် <p> ဒြပ်စင်တစ်ခု၏ အပေါ်ဆုံးအကွက်ကို သတ်မှတ်နည်းကို သရုပ်ပြသည်။
ပါ ဤဥပမာသည် <p> ဒြပ်စင်တစ်ခု၏ အောက်ခြေအကွက်ကို သတ်မှတ်ပုံအား သရုပ်ပြသည်။
CSS Padding Properties အားလုံး
Property | Description |
---|---|
padding | A shorthand property for setting all the padding properties in one declaration |
padding-bottom | Sets the bottom padding of an element |
padding-left | Sets the left padding of an element |
padding-right | Sets the right padding of an element |
padding-top | Sets the top padding of an element |