এই এলিমেন্টের প্রস্থ 100%।
একটি এলিমেন্টের height এবং width সেট করতে height এবং width প্রপার্টি ব্যবহার করা হয়।
height এবং width প্রপার্টিতে padding, border, বা margin অন্তর্ভুক্ত থাকে না। এটি এলিমেন্টের padding, border এবং margin-এর ভেতরের এলাকার height/width সেট করে।
height এবং width প্রপার্টির নিচের মানগুলো থাকতে পারে:
auto - এটি ডিফল্ট। ব্রাউজার height এবং width হিসাব করেlength - px, cm ইত্যাদিতে height/width নির্ধারণ করে% - কন্টেইনিং ব্লকের শতাংশে height/width নির্ধারণ করেinitial - height/width-কে এর ডিফল্ট মানে সেট করেinherit - height/width তার প্যারেন্টের মান থেকে ইনহেরিট হবেএকটি <div> এলিমেন্টের height এবং width সেট করুন:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}মনে রাখবেন: মনে রাখবেন যে height এবং width প্রপার্টিতে padding, border, বা margin অন্তর্ভুক্ত থাকে না! এগুলো এলিমেন্টের padding, border এবং margin-এর ভেতরের এলাকার height/width সেট করে!
একটি এলিমেন্টের সর্বোচ্চ প্রস্থ সেট করতে max-width প্রপার্টি ব্যবহার করা হয়।
max-width length মানে (যেমন px, cm ইত্যাদি) নির্ধারণ করা যায়, অথবা কন্টেইনিং ব্লকের শতাংশে (%), অথবা none সেট করা যায় (এটি ডিফল্ট। মানে কোনো সর্বোচ্চ প্রস্থ নেই)।
উপরের <div>-এ সমস্যা তখন হয়, যখন ব্রাউজার উইন্ডো এলিমেন্টের প্রস্থের (500px) চেয়ে ছোট হয়। তখন ব্রাউজার পেজে একটি অনুভূমিক স্ক্রলবার যোগ করে।
এই পরিস্থিতিতে, এর বদলে max-width ব্যবহার করলে ছোট উইন্ডো পরিচালনায় ব্রাউজারের কার্যক্ষমতা উন্নত হবে।
টিপস: দুটি div-এর মধ্যে পার্থক্য দেখতে ব্রাউজার উইন্ডো 500px-এর কম প্রশস্ততায় টেনে আনুন!
মনে রাখবেন: max-width প্রপার্টির মান width-কে ওভাররাইড করে।
এই <div> এলিমেন্টের height 100 পিক্সেল এবং max-width 500 পিক্সেল:
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}| প্রপার্টি | বিবরণ |
|---|---|
| height | একটি এলিমেন্টের height সেট করে |
| max-height | একটি এলিমেন্টের সর্বোচ্চ height সেট করে |
| max-width | একটি এলিমেন্টের সর্বোচ্চ width সেট করে |
| min-height | একটি এলিমেন্টের সর্বনিম্ন height সেট করে |
| min-width | একটি এলিমেন্টের সর্বনিম্ন width সেট করে |
| width | একটি এলিমেন্টের width সেট করে |