Home esercizi css unit%C3%A0 di misura relative

Esercizi REM e EM CSS

Scopri l’importanza delle unità di misura relative in CSS e come possono migliorare la flessibilità del tuo layout. Allenati nell’uso di em e rem per adattare i tuoi elementi alle dimensioni del dispositivo dell’utente.

Esercizio 1

Crea una pagina HTML con un elemento di testo all'interno. Applica al testo un font-size di 16px e un padding di 1rem. Quanto sarà la dimensione effettiva del padding?

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        font-size: 16px;
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <p>Il testo all'interno del p avrà un padding di 16px.</p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un elemento di testo all'interno. Applica al testo un font-size di 14px e un margine di 2em. Quanto sarà la dimensione effettiva del margine?

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      p {
        font-size: 14px;
        margin: 2em;
      }
    </style>
  </head>
  <body>
    <p>Il testo all'interno del p avrà un margine di 28px.</p>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un elemento di testo all'interno. Applica al testo un font-size di 18px e un line-height di 1.5em. Quanto sarà la dimensione effettiva dell'interlinea?

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      p {
        font-size: 18px;
        line-height: 1.5em;
      }
    </style>
  </head>
  <body>
    <p>Il testo all'interno del p avrà un'interlinea di 27px.</p>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con un elemento di testo all'interno. Applica al testo un font-size di 20px e un padding di 0.5rem. Quanto sarà la dimensione effettiva del padding?

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      p {
        font-size: 20px;
        padding: 0.5rem;
      }
    </style>
  </head>
  <body>
    <p>Il testo all'interno del p avrà un padding di 10px.</p>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con un elemento di testo all'interno. Applica al testo un font-size di 16px e un margine di 1em. Quanto sarà la dimensione effettiva del margine?

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      p {
        font-size: 16px;
        margin: 1em;
      }
    </style>
  </head>
  <body>
    <p>Il testo all'interno del p avrà un margine di 16px.</p>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un elemento di testo all'interno. Applica al testo un font-size di 14px e un line-height di 2em. Quanto sarà la dimensione effettiva dell'interlinea?

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      p {
        font-size: 14px;
        line-height: 2em;
      }
    </style>
  </head>
  <body>
    <p>Il testo all'interno del p avrà un'interlinea di 28px.</p>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un elemento di testo all'interno. Applica al testo un font-size di 20px e un padding di 1rem. Quanto sarà la dimensione effettiva del padding?

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      p {
        font-size: 20px;
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <p>Il testo all'interno del p avrà un padding di 20px.</p>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con un elemento di testo all'interno. Applica al testo un font-size di 18px e un margine di 2em. Quanto sarà la dimensione effettiva del margine?

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      p {
        font-size: 18px;
        margin: 2em;
      }
    </style>
  </head>
  <body>
    <p>Il testo all'interno del p avrà un margine di 36px.</p>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un elemento di testo all'interno. Applica al testo un font-size di 24px e un line-height di 1.5em. Quanto sarà la dimensione effettiva dell'interlinea?

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      p {
        font-size: 24px;
        line-height: 1.5em;
      }
    </style>
  </head>
  <body>
    <p>Il testo all'interno del p avrà un'interlinea di 36px.</p>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un elemento di testo all'interno. Applica al testo un font-size di 16px e un padding di 0.5rem. Quanto sarà la dimensione effettiva del padding?

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      p {
        font-size: 16px;
        padding: 0.5rem;
      }
    </style>
  </head>
  <body>
    <p>Il testo all'interno del p avrà un padding di 8px.</p>
  </body>
</html>