min-height ဂုဏ်သတ္တိ

min-height ဂုဏ်သတ္တိသည် အချက်တစ်ခု၏ အနိမ့်ဆုံးအမြင့်ကို သတ်မှတ်ပေးပါသည်။ ဤဂုဏ်သတ္တိ၏ တန်ဖိုးများအဖြစ် အရွယ်အစားများအတွက် ယူနစ်များ သို့မဟုတ် တန်ဖိုးမရှိခြင်းကို ဆိုလိုသည့် သော့ချက်စကားလုံး none တို့ကို အသုံးပြုနိုင်ပါသည်။

ဤဂုဏ်သတ္တိကို များသောအားဖြင့် ပြောင်းလွယ်ပြင်လွယ် အကျယ် (သို့) အမြင့် (အမြင့်ကို ရာခိုင်နှုန်းများဖြင့် သတ်မှတ်ထားခြင်း သို့မဟုတ် လုံးဝမသတ်မှတ်ထားဘဲ အချက်သည် ၎င်း၏ပါဝင်မှုဖြင့် အမြင့်တိုးလာခြင်း) ရှိသော အချက်များအတွက် သတ်မှတ်ပေးလေ့ရှိပါသည်။

အနိမ့်ဆုံးအမြင့်ကို သတ်မှတ်ထားပါက၊ အချက်သည် ထိုအမြင့်ထက် ပိုမိုနိမ့်ကျသွားနိုင်မည် မဟုတ်ပါ။ min-height အတွက် လိုအပ်သည်ထက် စာသားနည်းနေပါက၊ အချက်သည် min-height ၏ အမြင့်ကို ရရှိမည်ဖြစ်သည်။

စာသားပိုများနေပါက၊ အချက်၏အမြင့်သည် စာသား၏ပမာဏအပေါ် မူတည်၍ တွက်ချက်သတ်မှတ်ပါလိမ့်မည်။

ဝါကျဖွဲ့စည်းပုံ

cssရွေးချယ်သူ {
  min-height: တန်ဖိုး;
}

နမူနာ

ဤနမူနာတွင် အမြင့်ကို လုံးဝမသတ်မှတ်ထားဘဲ၊ စာသား၏ပမာဏအပေါ် မူတည်၍ ဘရောင်ဇာမှ ကိုယ်တိုင်တွက်ချက်သတ်မှတ်ပါလိမ့်မည်။ သို့ရာတွင်၊ min-height ဂုဏ်သတ္တိကို သတ်မှတ်ထားသောကြောင့်၊ အချက်အတွင်းတွင် စာသားလုံးဝမရှိသည့်တိုင်၊ အမြင့်သည် ဤတန်ဖိုးထက် နိမ့်ကျသွားမည် မဟုတ်ပါ။

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  min-height: 100px;
  width: 300px;
  border: 1px solid black;
}

Результат:

နမူနာ

အချက်တစ်ခုလုံး အမြင့်ဖြင့် ပြည့်လွန်သွားစေရန် လုံလောက်သည်ထက် ပိုမိုများပြားသော စာသားကို အချက်ထဲသို့ ထည့်ကြည့်ကြပါစို့။ ဤအခြေအနေတွင် ကျွန်ုပ်တို့၏ဘလောက်သည် ၎င်း၏အမြင့်ကို ရိုးရိုးတိုးမြှင့်ပေးပါလိမ့်မည်။

html<div id="elem">
  some long text
</div>

css#elem {
  min-height: 100px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

နမူနာ

နှိုင်းယှဉ်ကြည့်ရှုရန်၊ အနိမ့်ဆုံးအမြင့်ကို ဖယ်ရှားပြီး၊ ၎င်းအစား height ဂုဏ်သတ္တိကို သတ်မှတ်ပေးပါက ဘလောက်တစ်ခုနှင့် မည်သို့ဖြစ်မည်ကို ကြည့်ကြပါစို့။

html<div id="elem">
  some long text
</div>

css#elem {
  height: 100px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
  margin-bottom: 50px;
}

Результат:

ဤအကြောင်းကိုလည်း ကြည့်ပါ