Bevezetés az em egységekbe a CSS-ben

Az em egységek lehetővé teszik a betűméret beállítását a szülő elem méretéhez viszonyított százalékban. Nézzük meg egy példán.

Tegyük fel, hogy vannak beágyazott tagjaink:

html<div>
  <p>
    szöveg
  </p>
</div>

Állítsuk be a betűméretet a div elemünknek:

cssdiv {
  font-size: 20px;
}

A bekezdésnek pedig állítsuk be a méretet 2em-re. Ez az érték a szülő betűméretének kétszeresének felel meg:

cssp {
  font-size: 2em; /* 40px-nek felel meg */
}

Most állítsuk a bekezdés méretét 0.5em-re. Ez az érték a szülő betűméretének felének felel meg:

cssp {
  font-size: 0.5em; /* 10px-nek felel meg */
}

Az 1em érték a bekezdés betűméretét ugyanakkora lesz, mint a szülő div-é:

cssp {
  font-size: 1em; /* 20px-nek felel meg */
}

Gyakorlati feladatok

Tegyük fel, hogy van egy HTML kódunk, amelyre feladatokat fogunk megoldani:

html<ul>
  <li>szöveg</li>
  <li>szöveg</li>
  <li>szöveg</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;
}