সিএসএস Width এবং Height
সিএসএস Width এবং Height সেট করা
একটি এলিমেন্টের width এবং height সেট করার জন্য সিএসএস width এবং height প্রোপার্টি ব্যবহার করা হয়।
এই এলিমেন্টে 70% width ব্যবহার করা হয়েছে।
এক নজরে সিএসএস ডাইমেনশন প্রোপার্টিসমূহ
একটি এলিমেন্টের width সেট করার জন্য ব্যবহার করা হয়।
একটি এলিমেন্টের সর্বোচ্চ(maximum) width সেট করার জন্য ব্যবহার করা হয়।
একটি এলিমেন্টের সর্বনিম্ন(minumum) width সেট করার জন্য ব্যবহার করা হয়।
একটি এলিমেন্টের height সেট করার জন্য ব্যবহার করা হয়।
একটি এলিমেন্টের সর্বোচ্চ(maximum) height সেট করার জন্য ব্যবহার করা হয়।
একটি এলিমেন্টের সর্বনিম্ন(minumum) height সেট করার জন্য ব্যবহার করা হয়।
স্বয়ংক্রিয়ভাবেও width এবং height সেট করা যেতে পারে। অর্থাৎ আমরা না সেট করে দিলে ব্রাউজার ডিফল্টভাবে নিজ থেকে width এবং height সেট করে নেয়। এছাড়াও দৈর্ঘ্য নির্ণয়ের বিভিন্ন একক যেমনঃ px, cm, % ইত্যাদি ব্যবহার করেও সেট করা যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
height: 150px;
width: 30%;
background-color: seagreen;
color: white;
text-align: center;
border:2px solid black;
}
</style>
</head>
<body>
<h3>এলিমেন্টের height এবং widht সেট করা</h3>
<div>এই div এর height 150px এবং width 30%</div>
</body>
</html>
ফলাফল
বিঃদ্রঃ width এবং height প্রোপার্টির মধ্যে padding, border এবং margin অন্তুর্ভূক্ত নয়। width এবং height প্রোপার্টি এলিমেন্টের প্যাডিং, বর্ডার এবং মার্জিনের ভিতরে width/height সেট করে।
max-width সেট করা
একটি এলিমেন্টের maximum width সেট করার জন্য max-width প্রোপার্টিটি ব্যবহার করা হয়।
দৈর্ঘ্য নির্ণয়ের বিভিন্ন একক যেমনঃ px, cm ইত্যাদি অথবা পারসেন্ট(%) ব্যবহার করে একটি এলিমেন্টের max-width সেট করা যেতে পারে। অথবা max-width এর ভ্যালু none সেট করা যেতে পারে। অর্থাৎ ডিফল্টভাবে যার কোনো কোন maximum width থাকবে না।
জেনে রাখা ভাল যে, যখন ব্রাউজার উইন্ডো থেকে এলিমেন্টের width বড় হয় তখন ব্রাউজার এলিমেন্টটিতে একটি হরিজন্টাল স্ক্রলবার যুক্ত করে নেয়।
এক্ষেত্রে max-width প্রোপার্টিটি ব্যবহার করে এই সমস্যার সমাধান করা যায়।
বিঃদ্রঃ আমাদের এই অধ্যায়ে ব্যবহৃত div দুটির মধ্যে পার্থক্য দেখার জন্য ব্রাউজার উইন্ডোর প্রস্থ(width) ৫০০px থেকে ছোট করুন।
বিঃদ্রঃ max-width প্রোপার্টির ভ্যালু width প্রোপার্টির ভ্যালুকে ওভাররাইড(override) করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
max-width:550px;
height:150px;
background-color:lightskyblue;
}
</style>
</head>
<body>
<h3>max-width প্রোপার্টির ব্যবহার</h3>
<div>এই div এলিমেন্টটিতে height 100px এবং max-width 500px সেট করা হয়েছে।</div>
</body>
</html>
বিঃদ্রঃ প্রতিক্রিয়া দেখার জন্য ব্রাউজার উইন্ডোর সাইজ পরিবর্তন করুন
ফলাফল