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

පහත කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලයක් ලෙස div ටැග්වලට px වලින් අකුරු ප්‍රමාණය සහ ඉඩ පරතරය කුමක් වේදැයි තීරණය කරන්න:

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

පහත කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලයක් ලෙස p ටැග්වලට px වලින් අකුරු ප්‍රමාණය සහ ඉඩ පරතරය කුමක් වේදැයි තීරණය කරන්න:

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;
}