Esercizi Margini e Padding CSS

Codegrind Team•Jul 16 2023

Affina le tue competenze nel regolare accuratamente i margini e il padding degli elementi HTML per un layout perfettamente spaziato e bilanciato. Pratica le regole CSS per ottenere risultati ottimali.

Esercizio 1

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare un margine esterno di 20px e un padding interno di 10px al paragrafo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        margin: 20px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>
      Questo paragrafo ha un margine esterno di 20px e un padding interno di
      10px.
    </p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare un margine interno di 5px e un padding esterno di 15px al link.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      a {
        margin: 0;
        padding: 15px;
        color: black;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#">Clicca qui</a>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un div all'interno. Usa il CSS per impostare un margine esterno di 30px e un padding interno di 10px al div.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      div {
        margin: 30px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      Questo div ha un margine esterno di 30px e un padding interno di 10px.
    </div>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare un margine interno di 5px e un padding esterno di 10px agli elementi di lista.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      li {
        margin: 0;
        padding: 10px;
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con un titolo all'interno. Usa il CSS per impostare un margine esterno di 40px e un padding interno di 10px al titolo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      h1 {
        margin: 40px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>
      Questo è un titolo con un margine esterno di 40px e un padding interno di
      10px.
    </h1>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare un margine interno di 5px e un padding esterno di 15px al link, con il testo in grassetto.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      a {
        margin: 0;
        padding: 15px;
        font-weight: bold;
        color: black;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#">Clicca qui</a>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un div all'interno. Usa il CSS per impostare un margine esterno di 30px e un padding interno di 10px al div, con lo sfondo di colore grigio chiaro.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      div {
        margin: 30px;
        padding: 10px;
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <div>
      Questo div ha un margine esterno di 30px, un padding interno di 10px e uno
      sfondo grigio chiaro.
    </div>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare un margine esterno di 5px e un padding interno di 10px agli elementi di lista, con i punti della lista di colore rosso.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      li {
        margin: 5px;
        padding: 10px;
        list-style-type: none;
        color: red;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un titolo all'interno. Usa il CSS per impostare un margine esterno di 40px e un padding interno di 10px al titolo, con il testo centrato.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      h1 {
        margin: 40px;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>
      Questo è un titolo centrato con un margine esterno di 40px e un padding
      interno di 10px.
    </h1>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare un margine interno di 5px e un padding esterno di 15px al link, con uno sfondo di colore giallo e il testo di colore blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      a {
        margin: 0;
        padding: 15px;
        background-color: yellow;
        color: blue;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#">Clicca qui</a>
  </body>
</html>