CSS-এ em ইউনিট পরিচিতি

em ইউনিটগুলি প্যারেন্টের সাইজের শতকরা হিসাবে ফন্টের সাইজ নির্ধারণ করতে দেয়। আসুন একটি উদাহরণ দেখি।

ধরুন আমাদের কাছে নেস্টেড ট্যাগগুলি এইরকম আছে:

<div>
	<p>
		text
	</p>
</div>

আসুন আমাদের div-এর ফন্ট সাইজ নির্ধারণ করি:

div {
	font-size: 20px;
}

এবং প্যারাগ্রাফটির সাইজ নির্ধারণ করি 2em-এ। এই মানটি প্যারেন্টের ফন্ট সাইজের দ্বিগুণ সাইজের ফন্টের সাথে মিলে যায়:

p {
	font-size: 2em; /* 40px এর সাথে মিলে যায় */
}

এখন প্যারাগ্রাফটির সাইজ নির্ধারণ করি 0.5em-এ। এই মানটি প্যারেন্টের ফন্ট সাইজের অর্ধেকের সাথে মিলে যায়:

p {
	font-size: 0.5em; /* 10px এর সাথে মিলে যায় */
}

1em মানটি প্যারাগ্রাফের ফন্টকে প্যারেন্ট div-এর মতোই করবে:

p {
	font-size: 1em; /* 20px এর সাথে মিলে যায় */
}

ব্যবহারিক সমস্যা

ধরুন আমাদের কাছে HTML কোড আছে, যার জন্য আমরা সমস্যার সমাধান করব:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

নিচের কোড执行 করার ফলে li ট্যাগগুলির px-এ কত ফন্ট সাইজ হবে তা নির্ধারণ করুন:

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

নিচের কোড执行 করার ফলে li ট্যাগগুলির px-এ কত ফন্ট সাইজ হবে তা নির্ধারণ করুন:

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

নিচের কোড执行 করার ফলে li ট্যাগগুলির px-এ কত ফন্ট সাইজ হবে তা নির্ধারণ করুন:

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}