সিএসএস height প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| height | ১.০ | ৪.০ | ১.০ | ১.০ | ৭.০ |
সংজ্ঞা ও ব্যবহার
একটি এলিমেন্টের height নির্ধারন করার জন্য height প্রোপার্টি ব্যবহার করা হয়।
পরামর্শঃ
- height প্রোপার্টিতে প্যাডিং, বর্ডার অথবা মার্জিন অন্তর্ভুক্ত করে না; এটা এলিমেন্টের প্যাডিং, বর্ডার অথবা মার্জিন সেট করে ।
- min-height ও max-height উচ্চতাকে অগ্রাহ্য করে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| auto | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
height: auto/length/initial/inherit;
একটি প্যারাগ্রাফ-এ height ও width বসানোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
img.default {
height: auto;
}
img.large {
height: 120px;
}
p.try {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<img class="default" src="../cssref_examples/satt.png" width="100" height="80"><br>
<img class="large" src="../cssref_examples/satt.png" width="100" height="80">
<p class="try"> এই প্যারাগ্রাফটির দৈর্ঘ্য এবং প্রস্থ 100px</p>
<p>
এগুলো একটি প্যারাগ্রাফের কিছু টেক্সট।
এগুলো একটি প্যারাগ্রাফের কিছু টেক্সট।
এগুলো একটি প্যারাগ্রাফের কিছু টেক্সট।
এগুলো একটি প্যারাগ্রাফের কিছু টেক্সট।
এগুলো একটি প্যারাগ্রাফের কিছু টেক্সট।
এগুলো একটি প্যারাগ্রাফের কিছু টেক্সট।
</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.height="500px"উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
width: 200px;
height: 100px;
background-color: teal;
color: white;
}
</style>
</head>
<body>
<p> DIV ইলিমেন্ট এর হাইট পরিবর্তন করার জন্য "Try" বাটনে ক্লিক করি।</p>
<button onclick="myFunction()">Try</button>
<div id="thisDiv">
<h1>স্যাট একাডেমি</h1>
</div>
<script>
function myFunction() { document.getElementById("thisDiv").style.height = "200px";
}
</script>
</body>
</html>
ফলাফল
শতকরা ভ্যালুকে ব্যবহার করে এলিমেন্টের উচ্চতা নির্ধারন করে
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<head>
<style>
html {
height: 100%;
}
body {
height: 100%;
}
img.default {
height: auto;
}
img.large {
height: 50%;
}
img.tini {
height: 10%;
}
</style>
</head>
<body>
<img class="default" src="../cssref_examples/satt.png" width="100" height="80"><br>
<img class="large" src="../cssref_examples/satt.png" width="100" height="80"><br>
<img class="tini" src="../cssref_examples/satt.png" width="100" height="80">
</body>
</html>
ফলাফল
height প্রোপার্টির ভ্যালু-সমূহ
- auto - ব্রাউজার উচ্চতার হিসাব করে । এটা ডিফল্ট আকারে থাকে।
- length - উচ্চতা px, cm ইত্যাদি এককে নির্ধারন করে।
- % - এটা ব্লকে থাকা উচ্চতাকে শতকরা আকারে প্রকাশ করে ।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit -এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
height প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।