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;
}
নির্ধারণ করুন, কোন ফন্ট সাইজ এবং ইন্ডেন্টেশন
px-এ div ট্যাগগুলি
নিম্নলিখিত কোড কার্যকর করার ফলস্বরূপ থাকবে:
section {
font-size: 10px;
}
div {
font-size: 2em;
margin: 3em;
}
নির্ধারণ করুন, কোন ফন্ট সাইজ এবং ইন্ডেন্টেশন
px-এ div ট্যাগগুলি
নিম্নলিখিত কোড কার্যকর করার ফলস্বরূপ থাকবে:
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;
}
নির্ধারণ করুন, কোন ফন্ট সাইজ এবং ইন্ডেন্টেশন
px-এ p ট্যাগগুলি ফলস্বরূপ থাকবে
নিম্নলিখিত কোড কার্যকর করার:
section {
font-size: 10px;
}
div {
font-size: 1.5em;
}
p {
font-size: 1em;
margin: 1.5em;
}