X

X

X

কোনো ইলামেন্টের দৈর্ঘ্য ও প্রস্থ সেট করার নিয়ম


এই ইলামেন্টের দৈর্ঘ্য ১০০% ।

ইলামেন্টের দৈর্ঘ্য ও প্রস্থ সেট করার নিয়ম

height এবং width প্রপার্টি ব্যবহার করে কোনো ইলামেন্টের দৈর্ঘ্য ও প্রস্থ সেট করা যায়।

height এবং width দ্বারা কোনো ইলামেন্টের দৈর্ঘ্য ও প্রস্থ auto হিসেবে সেট করা যায়। এক্ষেত্রে px, cm, etc., অথবর percent (%) ইত্যাদি একক ব্যবহার করা হয়। কোনো ইলামেন্টের দৈর্ঘ্য ও প্রস্থের মান শতকরায় সেট করলে প্যারেন্ট ইলামেন্ট রেফারেন্স অবেজক্ট হিসেবে কাজ করে। তবে মনে রাখবেন, যে প্যারেন্ট ইলামেন্টের position relative হবে কেবলমাত্র সেই ইলামেন্টটি রেফারেন্স অবজেক্ট হিসেবে কাজ করবেন।

এই ইলামেন্টের দৈর্ঘ্য বা উচ্চতা 200px এবং প্রস্থ 50% ।

Code Example

<style>
div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

এই ইলামেন্টের দৈর্ঘ্য বা উচ্চতা 100px এবং প্রস্থ 500px ।

Code Example

<style>
div {
    height: 100px;
    width: 500px;
    background-color: powderblue;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বি:দ্র: height এবং width প্রপার্টি দিয়ে যখন কোনো ইলামেন্টের দৈর্ঘ্য ও প্রস্থ সেট করা হয়, এটি উক্ত ইলামেন্টের padding, borders, অথবা margins প্রপার্টিগুলোকে বিবেচনা করে না। বরং এটি দ্বারা ইলামেন্টের padding, border, এবং margin প্রপার্টির মধ্যবর্তী জায়গার দৈর্ঘ্য ও প্রস্থ সেট করা হয়।


কোনো ইলামেন্টের max-width (সর্বাধিক প্রস্থ) সেট করার নিয়ম

max-width property ব্যবহার করে কোনো ইলামেন্টের সর্বাধিক প্রস্থ সেট করা হয়। অর্থাৎ, এটি দ্বারা বোঝানো হয়, ইলামেন্ট এর চাইতে কম প্রস্থ বিশিষ্ট হতে পারবে, কিন্তু এর চাইতে বেশি প্রস্থ বিশিষ্ট হতে পারবে না।

px, cm, etc., অথবা percent (%) ইত্যাদি একক ব্যবহার করে max-width কোনো ইলামেন্টের সর্বাধিক প্রস্থ সেট করা হয়।

যখন ব্রাউজার স্ক্রিন কোনো ইলামেন্টের প্রস্থের চেয়ে কম প্রস্থ বিশিষ্ট হয় তখন ব্রাউজার সঠিকভাবে উক্ত ইলামেন্টকে প্রদর্শণ করতে পারে না। সেক্ষেত্রে max-width প্রপার্টি ব্যবহার করলে ব্রাউজার একটি আনুভূমিক স্ক্রলবার স্বয়ংক্রিয়ভাবে যুক্ত করে। ফলে ব্রাউজারে উক্ত ইলামেন্টটি সঠিকভাবে উপস্থাপিত হয়।

নিচের উদাহরণে 100px উচ্চতা এবং সর্বাধিক 500px বিশিষ্ট একটি ইলামেন্টকে দেখানো হলো:

Code Example

<style>
div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS Dimension প্রপার্টিসমূহের তালিকা

Property বর্ণনা
height কোনো ইলামেন্টের উচ্চতা বা দৈর্ঘ্য সেট করার জন্য ব্যবহৃত হয়।
max-height কোনো ইলামেন্টের সর্বাধিক দৈর্ঘ্য বা উচ্চতা সেট করার জন্য ব্যবহৃত হয়।
max-width কোনো ইলামেন্টের সর্বাধিক প্রস্থ সেট করার জন্য ব্যবহৃত হয়।
min-height কোনো ইলামেন্টের সর্বনিম্ন দৈর্ঘ্য বা উচ্চতা সেট করার জন্য ব্যবহৃত হয়।
min-width কোনো ইলামেন্টের সর্বনিম্ন প্রস্থ সেট করার জন্য ব্যবহৃত হয়।
width কোনো ইলামেন্টের প্রস্থ সেট করার জন্য ব্যবহৃত হয়।