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

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

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

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

cssp {
  font-size: 20px;
}

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

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

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

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

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

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

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

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

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

Задание 1

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

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

Задание 2

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

Задание 3

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

Задание 4

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

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

Задание 5

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