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

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

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

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

cssmain {
  font-size: 10px;
}

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

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

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

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

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

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

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

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

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

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