CSS-এ ইন্ডেন্টেশন এবং em ইউনিট

ধরুন আমাদের নিম্নলিখিত ট্যাগ আছে:

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

ধরুন প্যারাগ্রাফের ফন্ট সাইজ px-এ দেওয়া আছে:

p {
	font-size: 20px;
}

আসুন এই প্যারাগ্রাফের মার্জিন em ইউনিটে সেট করি। এই ক্ষেত্রে, ইন্ডেন্টেশন এর আকার প্যারাগ্রাফের ফন্ট সাইজ থেকে গণনা করা হবে, তার প্যারেন্টের থেকে নয়:

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

ধরুন এখন প্যারাগ্রাফকে em-এ সাইজ দেওয়া হয়েছে:

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

আসুন আবার আমাদের এলিমেন্টে margin সেট করি। এই ক্ষেত্রে, এটি এখনও হবে এলিমেন্টের বর্তমান ফন্ট সাইজ থেকে গণনা করা। এই ক্ষেত্রে, ফন্ট সাইজের মান নিজেই প্যারেন্টের সাপেক্ষে গণনা করা হবে:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* 40px এর সাথে মিলে */
	margin: 2em;    /* 80px এর সাথে মিলে */
}

ব্যবহারিক কাজ

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

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

নির্ধারণ করুন, কোন ফন্ট সাইজ এবং ইন্ডেন্টেশন px-এ div ট্যাগগুলি নিম্নলিখিত কোড কার্যকর করার ফলস্বরূপ থাকবে:

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

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

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

নির্ধারণ করুন, কোন ফন্ট সাইজ এবং ইন্ডেন্টেশন px-এ p ট্যাগগুলি ফলস্বরূপ থাকবে নিম্নলিখিত কোড কার্যকর করার:

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

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