Introduktion till em-enheter i CSS

Enheten em låter dig ställa in teckenstorleken i procent av förälderns storlek. Låt oss titta på ett exempel.

Anta att vi har kapslade taggar som dessa:

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

Låt oss ställa in teckenstorleken för vår div:

cssdiv {
  font-size: 20px;
}

Och för stycket ställer vi in storleken till 2em. Detta värde motsvarar en teckenstorlek som är dubbelt så stor som förälderns teckenstorlek:

cssp {
  font-size: 2em; /* motsvarar 40px */
}

Och nu sätter vi styckets storlek till 0.5em. Detta värde motsvarar hälften av förälderns teckenstorlek:

cssp {
  font-size: 0.5em; /* motsvarar 10px */
}

Värdet 1em kommer att göra styckets teckenstorlek lika stor som förälderns div:

cssp {
  font-size: 1em; /* motsvarar 20px */
}

Praktiska uppgifter

Anta att vi har HTML-kod, för vilken vi kommer att lösa uppgifter:

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