CSS-এ ইনারিটেন্স এবং em ইউনিট

ধরুন এখন আমাদের আরও গভীর নেস্টিং আছে:

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

ধরুন main ট্যাগের নিম্নলিখিত ফন্ট সাইজ আছে:

main {
	font-size: 10px;
}

div ট্যাগে em-এ ফন্ট সাইজ সেট করি:

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

প্যারাগ্রাফেও em-এ ফন্ট সাইজ সেট করি। এই ক্ষেত্রে, এটি div-এর ইতিমধ্যে গণনা করা ফন্ট সাইজের সাপেক্ষে তার সাইজ গণনা করবে:

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

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

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

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

নিম্নলিখিত কোড 실행ের ফলে div-গুলোর px-এ ফন্ট সাইজ কত হবে তা নির্ধারণ করুন:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
}

নিম্নলিখিত কোড 실행ের ফলে প্যারাগ্রাফগুলোর px-এ ফন্ট সাইজ কত হবে তা নির্ধারণ করুন:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
}
p {
	font-size: 1.5em;
}

section {
	font-size: 40px;
}
div {
	font-size: 0.5em;
}
p {
	font-size: 0.5em;
}