line-height বৈশিষ্ট্য

line-height বৈশিষ্ট্য টেক্সটের লাইনগুলোর মধ্যে ফাঁক (লাইন স্পেসিং) সেট করে।

প্রথমে মনে হতে পারে যে বৈশিষ্ট্যটি টেক্সটের লাইনগুলোর মধ্যে ফাঁক নির্দিষ্ট করে, কিন্তু তা নয়, এটি নির্দিষ্ট করে টেক্সট লাইনের উচ্চতা। এর মানে হল লাইনগুলোর মধ্যে প্রকৃত ফাঁকটি এভাবে গণনা করা হবে: line-height - font-size = টেক্সটের লাইনগুলোর মধ্যে দূরত্ব। অন্যভাবে বললে, line-height = font-size + লাইনগুলোর মধ্যে দূরত্ব।

সিনট্যাক্স

cssসিলেক্টর {
  line-height: মান;
}

মানসমূহ

যেকোনো আকারের একক বৈশিষ্ট্যের মান হিসেবে ব্যবহার করা যায়। % এ মান নির্দিষ্ট করলে লাইন স্পেসিং হবে ফন্ট সাইজের শতকরা হিসাবে।

এছাড়াও, শূন্যের চেয়ে বড় যেকোনো সংখ্যা মান হিসেবে নির্দিষ্ট করা যেতে পারে। এই ক্ষেত্রে, এটি ফন্ট সাইজের গুণক হিসেবে বিবেচিত হয়। উদাহরণস্বরূপ, যদি font-size এর মান 20px হয়, এবং line-height - 1.5 হয়, তবে এটি line-height: 30px লেখার সমতুল্য (20px * 1.5 = 30px)।

ডিফল্টভাবে বৈশিষ্ট্যটির মান normal, এই ক্ষেত্রে ব্রাউজার স্বয়ংক্রিয়ভাবে লাইন স্পেসিং নির্বাচন করে।

উদাহরণ

এই উদাহরণে, টেক্সটের লাইনগুলোর মধ্যে দূরত্ব হবে line-height - font-size = 38px - 18px = 20px:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 35px;
  text-align: justify;
}

Результат:

উদাহরণ

ফাঁকটি 25px - 18px = 7px এ কমিয়ে দেওয়া হল:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 25px;
  text-align: justify;
}

Результат:

উদাহরণ

এই উদাহরণে, টেক্সটের লাইনগুলোর মধ্যে দূরত্ব হবে line-height - font-size = 18px - 18px = 0px - লাইনগুলি কার্যত একসাথে লেগে যাবে (উপরের লাইনের অক্ষরের নিচের অংশগুলি নিচের লাইনের অক্ষরের উপরের অংশগুলি স্পর্শ করবে):

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 18px;
  text-align: justify;
}

Результат:

উদাহরণ

এই উদাহরণে, line-height এর মান হল ফন্ট সাইজের গুণক 1.5। সুতরাং line-height এর মান হবে font-size * 1.5 = 18px * 1.5 = 27px এর সমতুল্য। এবং লাইনগুলোর মধ্যে প্রকৃত ফাঁক হবে line-height - font-size = 27px - 18px = 9px:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 1.5;
  text-align: justify;
}

Результат:

উদাহরণ

গুণক বাড়ানো হল:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 2.5;
  text-align: justify;
}

Результат:

উদাহরণ

যদি line-height কে font-size এর চেয়ে কম করা হয়, তবে লাইনগুলি একে অপরের উপর চাপে আসবে:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 13px;
  text-align: justify;
}

Результат: