CSS ကို Padding ၏အကျဉ်းချုပ်ခြုံငုံသုံးသပ်ချက်

CSS ကို padding ကို၏ဂုဏ်သတ္တိများတစ်ခုဖြစ်တယ် CSS ကိုသေတ္တာမော်ဒယ် ။ ဤသည်အတိုကောက်ပိုင်ဆိုင်မှုတစ်ခုက HTML element ရဲ့အားလုံးလေးခုနှစ်ဖက်ပတ်လည် padding ကိုသတ်မှတ်။ CSS ကို padding ကိုနီးပါးတိုင်းမှလျှောက်ထားနိုင်ပါသည် HTML ကို tag ကို (စားပွဲ tags များအချို့ မှလွဲ. ) ။ ထို့အပြင်ယင်းဒြပ်စင်၏လေးယောက်လုံးနှစ်ဖက်ကွဲပြားခြားနားသောတန်ဖိုးကရှိနိုင်ပါသည်။

CSS ကို Padding အိမ်ခြံမြေ

အဆိုပါအတိုကောက် CSS ကို padding ကို property ကိုသုံးနိုင်ရန်, သငျသညျ (သင် Star Trek ပရိတ်သတ်တွေဘို့ဒါမှမဟုတ် "TRiBbLe") ကို mnemonic "ဒုက္ခ" ကိုသုံးနိုင်သည်။ ဤသည်, ညာ, ထိပ်ပိုင်းအတိုကောက်အောက်ခြေနှင့် left နှင့်သင်အတိုကောက်ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုအတွက်သတ်မှတ် padding ကို width ၏အမိန့်ကိုရည်ညွှန်းသည်။ ဥပမာ:

padding ကို: ညာဘက်အောက်ခြေတွင်လက်ဝဲ; padding ကို: 1px 2px 3px 6px;

သငျသညျအထကျစာရင်းတန်ဖိုးများကိုအသုံးပြုပါကသငျသညျကလျှောက်ထားကြသည်သမျှက HTML element ရဲ့အရပ်ရပ်မှတစ်ဦးကွဲပြားခြားနား padding ကိုတနျဖိုးလျှောက်ထားမည်ဖြစ်သည်။ သင်တို့ရှိသမျှလေးနှစ်ဖက်မှတူညီ padding ကိုလျှောက်ထားလိုပါက, သင်သည်သင်၏ CSS ကိုရိုးရှင်းရုံတစျခုတနျဖိုးရေးနိုင်သည်

padding ကို: 12px;

CSS ကို၏လိုင်းနှင့်အတူ, padding ကို 12 pixels ကို၎င်းဒြပ်စင်၏အားလုံး 4 နှစ်ဖက်လျှောက်ထားမည်ဖြစ်သည်။

သင် padding ကိုထိပ်နဲ့အောက်ဆုံးနှင့်လက်ဝဲဘက်နှင့်ညာဘက်အဘို့အတူဖြစ်ချင်လျှင်, သင်နှစ်ခုတန်ဖိုးများကိုရေးသားနိုင်သည်

padding ကို: 24px 48px;

ဒုတိယလက်ဝဲနှင့်လက်ယာလျှောက်ထားမယ်လို့နေစဉ်ပထမဦးဆုံးတန်ဖိုး (24px), ထိပ်များနှင့်အောက်ခြေလျှောက်ထားမည်ဖြစ်သည်။

သငျသညျသုံးတန်ဖိုးများကိုရေးလိုက်ပါလျှင်ထိပ်နှင့်အောက်ခြေပြောင်းလဲနေတဲ့နေစဉ်, သောအလျားလိုက် padding ကို (စွန်ညာ) တူညီ, စေမည်:

padding ကို: ဘယ်ဘက်ထိပ်ညာဘက်-and အောက်ခြေ; padding ကို: 0px 1px 3px;

အဆိုပါ CSS ကိုသေတ္တာမော်ဒယ်အဆိုအရ, padding ကို၎င်းဒြပ်စင် / content တွေကိုသူ့ဟာသူအနီးဆုံးဖြစ်ပါတယ်။ ဤသည် padding ကိုအကျယ်သို့မဟုတ်အမြင့်နှင့်မည်သည့်နယ်စပ်သင်အသုံးပြုတန်ဖိုးထားအကြောင်းအရာအကြားမှာရှိတဲ့ element တစ်ခုထည့်သွင်းကြောင်းဆိုလိုသည်။ အဆိုပါ padding ကိုသုညမှသတ်မှတ်လျှင်, သူကအကြောင်းအရာကဲ့သို့တူညီသောအစွန်းရှိပါတယ်။

CSS ကို Padding တန်ဖိုးများ

CSS ကို padding ကိုမဆို Non-အနုတ်လက္ခဏာအရှည်တန်ဖိုးကိုယူနိုင်ပါတယ်။ ထိုကဲ့သို့သော px သို့မဟုတ် em သကဲ့သို့, တိုင်းတာခြင်းကိုသတ်မှတ်တာသေချာပါစေ။ သင်တို့သည်လည်း Element ရဲ့ပါဝင်တဲ့ block ရဲ့ width တစ်ရာခိုင်နှုန်းဖြစ်လတံ့သော, သင့် padding ကိုတစ်ရာခိုင်နှုန်းကိုသတ်မှတ်နိုင်ပါတယ်။ ဒါကထိပ်တန်းနှင့်အောက်ခြေ padding ကိုများအတွက်ပါဝင်သည်။ ဥပမာ:

#container {width: 800px; အမြင့်: 200px; } #container p {width: 400px; အမြင့်: 75%; padding ကို: 25% 0; }

အဆိုပါ #container ဒြပ်စင်အတွင်းရှိအပိုဒ်၏အမြင့်အဆိုပါ #container 's အမြင့်၏ 75% ပေါင်းထိပ် padding ကိုများအတွက်အကျယ်၏ 25% နှင့်အောက်ခြေ padding ကိုများအတွက်အကျယ်၏ 25% ဖြစ်လိမ့်မည်။ ဤသည် = 700px 300 + 200 + 200 စုစုပေါငျး။

CSS ကို Padding ပေါင်းထည့်ခြင်း၏ဆိုးကျိုးများ

တွင် ပိတ်ပင်တားဆီးမှု-Level ဒြပ်စင် သည် padding ကိုလေးခုနှစ်ဖက်ပေါ်လျှောက်ထားသည်။ ၎င်းဒြပ်စင်ပြီးသားတစ်ဦးပိတ်ပင်တားဆီးမှုသို့မဟုတ်သေတ္တာဖြစ်ပါသည်သောကြောင့်, padding ကို box ကိုနှစ်ဖက်မှလျှောက်ထားသည်။

CSS ကို padding ကိုထည့်သွင်းတဲ့အခါ element တွေကို inline , ထိုအရပ်၌ဒေါင်လိုက် padding ကိုမျဉ်းအမြင့်ထက်ကျော်လွန်ပါက inline element ကအထက်နှင့်အောက်တွင်ဖော်ပြထားသောဒြပ်စင်အချို့ကိုထပ်ဖြစ်စေခြင်းငှါ, ဒါပေမယ့်သူကလိုင်းအမြင့်ကိုဆင်းတွန်းလိမ့်မည်မဟုတ်ပါ။ ဒြပ်စင် inline မှလျှောက်ထားအလျားလိုက် CSS ကို padding ကို၎င်းဒြပ်စင်များနှင့်ဒြပ်စင်၏အဆုံး၏အစအဦးမှဆက်ပြောသည်လိမ့်မည်။ ထိုအခါ padding ကိုလိုင်းများခြုံစေနိုင်သည်။ သငျသညျ Multi-line ကို inline အကြောင်းအရာတစ်ခု segment ကို Indent မှ padding ကိုမသုံးနိုင်အောင်ဒါပေမယ့်, multi-line ကိုဒြပ်စင်အပေါငျးတို့သလိုင်းများမှလျှောက်ထားမည်မဟုတ်။

width ကို width (သို့မဟုတ် padding ကို width) အတွက်ရာခိုင်နှုန်းနှင့်အတူ Element တစ်ခုရဲ့အပျေါမှာမူတည်သည်အဘယ်မှာရှိဒါ့အပြင် CSS2.1 အတွက်, သငျသညျကွန်တိန်နာလုပ်ကွက်ကိုမဖန်တီးနိုင်ပါ။ သင်ပြုလျှင်ရလဒ် undefined ဖြစ်ပါတယ်။ browsers နေဆဲ contents တွေကိုပြသပါလိမ့်မယ်, ဒါပေမယ့်သင်ကမျှော်လင့်နေကြသည်ရလဒ်ကိုမရနိုငျသညျ။ သင်ကစဉ်းစားခဲ့လျှင်သင့်ရဲ့ကွန်တိန်နာဒြပ်စင်သည်၎င်း၏ width ကို-ထိုကဲ့သို့သောက Pre-defined အကျယ်ရှိသည်, တဦးတည်းသို့မဟုတ်ထိုထက်ပိုရှိပါတယ်ပါဘူးတဲ့အခါမှာအဖြစ်သတ်မှတ်နိုင်ရန်အတွက်၎င်း၏ကလေးကဒြပ်စင်များ၏အကျယ်ကိုသိရန်လိုအပ်ပါသည်လျှင်အဖြစ်ကသဘာဝကျပါတယ် ကွန်တိန်နာဒြပ်စင်၏ရာခိုင်နှုန်းအဖြစ်သတ်မှတ်ထားတစ်ဦးရဲ့ width, ဒီမျှအဖြေနှင့်အတူတစ်ဦးမြို့ပတ်ရထားကွင်းဆက်တက်သတ်မှတ်။ သင်သည်သင်၏စာရွက်စာတမ်းအပေါ်ဘာမှ၏အကျယ်အဘို့ရာခိုင်နှုန်းကိုသုံးပါလျှင်, သင်မိဘဒြပ်စင် width ကိုလည်းသတ်မှတ်ကြသည်သေချာအောင်သင့်ပါတယ်။