Esercizi Box Sizing CSS

Codegrind Team•Jul 16 2023

Allenati nell’utilizzo della proprietà “box-sizing” in CSS per avere un controllo completo sul dimensionamento degli elementi HTML. Migliora la gestione degli spazi e ottieni un layout più armonioso.

Esercizio 1

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare il box-sizing in modo che il padding e il bordo non influenzino la larghezza totale del paragrafo, che dovrà essere di 200px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        box-sizing: border-box;
        width: 200px;
        padding: 20px;
        border: 2px solid red;
      }
    </style>
  </head>
  <body>
    <p>Questo paragrafo ha una larghezza di 200px, incluso padding e bordo.</p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare il box-sizing in modo che il padding non influenzi la larghezza del link, che dovrà essere di 100px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      a {
        box-sizing: content-box;
        width: 100px;
        padding: 20px;
        color: black;
        text-decoration: none;
        border: 1px dashed blue;
      }
    </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 il box-sizing in modo che il padding e il bordo siano inclusi nella larghezza del div, che dovrà essere di 300px in totale.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      div {
        box-sizing: border-box;
        width: 300px;
        padding: 20px;
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <div>Questo div ha una larghezza di 300px, inclusi padding e bordo.</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 il box-sizing in modo che il padding non influenzi l'altezza degli elementi di lista, che dovranno essere di 40px in altezza.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      li {
        box-sizing: content-box;
        height: 40px;
        padding: 10px;
        list-style-type: none;
        border: 2px solid blue;
      }
    </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 il box-sizing in modo che il bordo non influenzi l'altezza del titolo, che dovrà essere di 50px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      h1 {
        box-sizing: content-box;
        height: 50px;
        padding: 10px;
        border: 1px dashed black;
      }
    </style>
  </head>
  <body>
    <h1>
      Questo è un titolo con un'altezza di 50px, incluso padding ma escluso
      bordo.
    </h1>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare il box-sizing in modo che il padding sia incluso nella larghezza del link, che dovrà essere di 150px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      a {
        box-sizing: border-box;
        width: 150px;
        padding: 20px;
        color: black;
        text-decoration: none;
        border: 1px dashed blue;
      }
    </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 il box-sizing in modo che il padding sia incluso nella larghezza del div, che dovrà essere di 400px in totale.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      div {
        box-sizing: border-box;
        width: 400px;
        padding: 20px;
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <div>Questo div ha una larghezza di 400px, inclusi padding e bordo.</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 il box-sizing in modo che il padding sia incluso nell'altezza degli elementi di lista, che dovranno essere di 60px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      li {
        box-sizing: border-box;
        height: 60px;
        padding: 10px;
        list-style-type: none;
        border: 2px solid blue;
      }
    </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 il box-sizing in modo che il padding sia incluso nell'altezza del titolo, che dovrà essere di 80px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      h1 {
        box-sizing: border-box;
        height: 80px;
        padding: 10px;
        border: 1px dashed black;
      }
    </style>
  </head>
  <body>
    <h1>
      Questo è un titolo con un'altezza di 80px, incluso padding ma escluso
      bordo.
    </h1>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare il box-sizing in modo che il bordo non influenzi la larghezza del link, che dovrà essere di 120px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      a {
        box-sizing: content-box;
        width: 120px;
        padding: 20px;
        color: black;
        text-decoration: none;
        border: 1px dashed blue;
      }
    </style>
  </head>
  <body>
    <a href="#">Clicca qui</a>
  </body>
</html>