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;
}

Результат:

আরও দেখুন