সিএসএস line-height প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| line-height | ১.০ | ৪.০ | ১.০ | ১.০ | ৭.০ |
সংজ্ঞা ও ব্যবহার
line-height প্রোপার্টিটি লাইন হাইটকে নির্ধারন করে।
পরামর্শঃ
- নেগেটিভ ভ্যালু গ্রহনযোগ্য নয়।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| normal | হ্যাঁ | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
line-height:normal/number/length/initial/inherit;
লাইন-হাইট শতকরায় প্রকাশঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
posleft
letterspacing
lineheight
<p class="l
<style>
p.short {
line-height: 60%;
}
p.long {
line-height: 180%;
}
</style>
</head>
<body>
<p>এই অনুচ্ছেদটিতে উপযুক্ত line-height ব্যবহার করা হয়েছে।<br>
এই অনুচ্ছেদটিতে উপযুক্ত line-height ব্যবহার করা হয়েছে।<br>
বেশিরভাগ ব্রাউজারে ডিফল্ট line-height 110% থেকে 120% ব্যবহার করা হয়।<br>
</p>
<p class="short">
এই অনুচ্ছেদটিতে line-height: 60%; ব্যবহার করা হয়েছে।<br>
এই অনুচ্ছেদটিতে line-height: 60%; ব্যবহার করা হয়েছে।<br>
এই অনুচ্ছেদটিতে line-height: 60%; ব্যবহার করা হয়েছে।<br>
এই অনুচ্ছেদটিতে line-height: 60%; ব্যবহার করা হয়েছে।<br>
</p>
এই অনুচ্ছেদটিতে line-height: 180%; ব্যবহার করা হয়েছে।<br>
এই অনুচ্ছেদটিতে line-height: 180%; ব্যবহার করা হয়েছে।<br>
এই অনুচ্ছেদটিতে line-height: 180%; ব্যবহার করা হয়েছে।<br>
এই অনুচ্ছেদটিতে line-height: 180%; ব্যবহার করা হয়েছে।<br>
এই অনুচ্ছেদটিতে line-height: 180%; ব্যবহার করা হয়েছে।<br>
</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.lineHeight="30px"উদাহরণ
<!DOCTYPE html>
<html>
<head>
<p>line-height প্রোপার্টির মাধ্যমে DIV ইলিমেন্টের প্রতিটি লাইনকে 20 pixels ফাঁকা করার জন্য "চেষ্টা করি" বাটন ক্লিক করুন।</p>
<button onclick="myFunction()">চেষ্টা করি</button>
<div id="thisDIv">
অধিনায়ক হিসেবে বাংলাদেশের হয়ে সবচেয়ে বেশি ম্যাচ জেতার রেকর্ডটি এত দিন ছিল হাবিবুল বাশারের দখলে।
কাল আফগানিস্তানের বিপক্ষে পাওয়া রুদ্ধশ্বাস জয়ে সেটি নিজের করে নিয়েছেন মাশরাফি বিন মুর্তজা।
টেস্ট, ওয়ানডে ও টি-টোয়েন্টি মিলিয়ে এখন পর্যন্ত মোট ৫৩টি ম্যাচে বাংলাদেশ দলকে নেতৃত্ব দিয়েছেন মাশরাফি।
এর ৩১টিতেই জয় পেয়েছে বাংলাদেশ, হার ২১টিতে।
টেস্ট ও ওয়ানডেতে হাবিবুলের নেতৃত্বে ৮৭ ম্যাচ খেলে বাংলাদেশের জয় ৩০টি ও হার ৫৩টি।
</div>
<script>
function myFunction() {
document.getElementById("thisDIv").style.lineHeight = "30px";
}
</script>
</body>
</html>
ফলাফল
আরও উদাহারণ
লাইনে দুইটি প্যারাগ্রাফের মাঝে স্পেস রাখতে পিক্সেল ব্যবহার করা হয়।
উদাহরণঃ এর উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
p.short {
line-height: 10px;
}
p.long {
line-height: 40px;
}
</style>
</head>
<body>
<p>এই অনুচ্ছেদটিতে উপযুক্ত line-height ব্যবহার করা হয়েছে।
বেশিরভাগ ব্রাউজারে ডিফল্ট line-height 110% থেকে 120% ব্যবহার করা হয়।
এই অনুচ্ছেদটিতে উপযুক্ত line-height ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে উপযুক্ত line-height ব্যবহার করা হয়েছে।
</p>
<p class="short">
এই অনুচ্ছেদটিতে line-height: 10px; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 10px; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 10px; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 10px; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 10px; ব্যবহার করা হয়েছে।
</p>
<p class="long">
এই অনুচ্ছেদটিতে line-height: 40px; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 40px; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 40px; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 40px; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 40px; ব্যবহার করা হয়েছে।
</p>
</body>
</html>
ফলাফল
লাইনে দুইটি প্যারাগ্রাফের মাঝে স্পেস রাখতে নাম্বার ভ্যালু ব্যবহার করা হয়
উদাহরণঃ এর উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
p.short {
line-height: 0.5;
}
p.long {
line-height: 3;
}
</style>
</head>
<body>
<p>এই অনুচ্ছেদটিতে উপযুক্ত line-height ব্যবহার করা হয়েছে।
ব্রাউজারের ডিফল্ট line-height "1" ব্যবহার করা হয়।
এই অনুচ্ছেদটিতে উপযুক্ত line-height ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে উপযুক্ত line-height ব্যবহার করা হয়েছে।
</p>
<p class="short">
এই অনুচ্ছেদটিতে line-height: 0.5; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 0.5; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 0.5; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 0.5; ব্যবহার করা হয়েছে।
</p>
<p class="long">
এই অনুচ্ছেদটিতে line-height: 3; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 3; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 3; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 3; ব্যবহার করা হয়েছে।
এই অনুচ্ছেদটিতে line-height: 3; ব্যবহার করা হয়েছে।
</p>
</body>
</html>
ফলাফল
line-height প্রোপার্টির ভ্যালু-সমূহ
- normal - একটা সাধারন লাইন হাইটকে বুঝায়। এটা সাধারনত ডিফল্ট আকারে থাকে।
- number - নির্ধারিত ফন্ট সাইজে লাইন হাইট সেট করার জন্য ইহা ব্যবহার করা হয়।
- length - px, pt, cm ইত্যাদি এককে প্রকাশ করা হয়।
- % - লাইন হাইটে চলমান ফন্ট পেইজকে শতকরায় প্রকাশ করা হয় ।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
line-height প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।