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

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

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

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

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

cssdiv {
  font-size: 20px;
}

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

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

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

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

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

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

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

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

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

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

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

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