Summary  
This chapter covers the CSS box-sizing property, explaining how the content-box and border-box values (and the inherit option) change the way an element’s width and height are calculated by including or excluding padding and borders.

General domain of usage  
Web page layout and styling

La proprietà `box-sizing` viene utilizzata per controllare come viene calcolata la dimensione totale di un elemento, in particolare per quanto riguarda la sua `width` e `height`. Esistono tre possibili valori per la proprietà `box-sizing`. Vediamo cosa significa ciascuno di questi valori:
```css
box-sizing: content-box | border-box | inherit;
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJ3cmFwcGVyIj4KICAgICAgPGRpdiBjbGFzcz0iY2FyZCBjb250ZW50LWJveCI+CiAgICAgICAgPGgzPmNvbnRlbnQtYm94PC9oMz4KICAgICAgICA8cD4KICAgICAgICAgIFRoZSBwYWRkaW5nIGFuZCBib3JkZXIgYXJlIGFkZGVkIG9uIHRvcCBvZiB0aGUgd2lkdGggYW5kIGhlaWdodC4gU28KICAgICAgICAgIHRoZSB0b3RhbCBzaXplIGJlY29tZXMgbGFyZ2VyIHRoYW4gMjAwcHguCiAgICAgICAgPC9wPgogICAgICA8L2Rpdj4KCiAgICAgIDxkaXYgY2xhc3M9ImNhcmQgYm9yZGVyLWJveCI+CiAgICAgICAgPGgzPmJvcmRlci1ib3g8L2gzPgogICAgICAgIDxwPgogICAgICAgICAgVGhlIHBhZGRpbmcgYW5kIGJvcmRlciBhcmUgaW5jbHVkZWQgaW4gdGhlIDIwMHB4IHdpZHRoIGFuZCBoZWlnaHQuIFRoZQogICAgICAgICAgYm94IHN0YXlzIGV4YWN0bHkgMjAwcHguCiAgICAgICAgPC9wPgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LyogQ3VycmVudCBmb2N1cyAqLwovKiBEZWZhdWx0IGJlaGF2aW9yICovCi5jb250ZW50LWJveCB7CiAgYm94LXNpemluZzogY29udGVudC1ib3g7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UxZjVmZTsKfQoKLyogUmVjb21tZW5kZWQgbW9kZXJuIGJlaGF2aW9yICovCi5ib3JkZXItYm94IHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogIGJhY2tncm91bmQtY29sb3I6ICNmZmYzZTA7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwoud3JhcHBlciB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBnYXA6IDQwcHg7CiAgcGFkZGluZzogMTBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjRmNGY4OwogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCi5jYXJkIHsKICB3aWR0aDogMjAwcHg7CiAgaGVpZ2h0OiAyMDBweDsKICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlcjogNHB4IHNvbGlkICM0YTkwZTI7CiAgYm9yZGVyLXJhZGl1czogMTJweDsKICBmb250LWZhbWlseTogJ0ZpcmEgU2FucycsIHNhbnMtc2VyaWY7CiAgYm94LXNoYWRvdzogMCA0cHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgZm9udC1zaXplOiAxNXB4OwogIGxpbmUtaGVpZ2h0OiAxLjU7CiAgdHJhbnNpdGlvbjogYWxsIDAuM3MgZWFzZTsKfQoKaDMgewogIHRleHQtYWxpZ246IGNlbnRlcjsKICBtYXJnaW4tdG9wOiAwOwogIGZvbnQtc2l6ZTogMjBweDsKICBmb250LXdlaWdodDogNjAwOwogIGNvbG9yOiAjMzMzOwp9

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* Current focus */
      /* Default behavior */
      .content-box {
        box-sizing: content-box;
        background-color: #e1f5fe;
      }

      /* Recommended modern behavior */
      .border-box {
        box-sizing: border-box;
        background-color: #fff3e0;
      }

      /* Additional styles for better appearance (not the current focus) */
      .wrapper {
        display: flex;
        justify-content: center;
        gap: 40px;
        padding: 10px;
        background-color: #f4f4f8;
        box-sizing: border-box;
      }

      .card {
        width: 200px;
        height: 200px;
        padding: 20px;
        border: 4px solid #4a90e2;
        border-radius: 12px;
        font-family: 'Fira Sans', sans-serif;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        font-size: 15px;
        line-height: 1.5;
        transition: all 0.3s ease;
      }

      h3 {
  text-align: center;
  margin-top: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="card content-box">
        <h3>content-box</h3>
        <p>
          Il padding e il bordo vengono aggiunti sopra la larghezza e l'altezza. Quindi
          la dimensione totale diventa maggiore di 200px.
        </p>
      </div>

      <div class="card border-box">
        <h3>border-box</h3>
        <p>
          Il padding e il bordo sono inclusi nella larghezza e nell'altezza di 200px. La
          box rimane esattamente di 200px.
        </p>
      </div>
    </div>
  </body>
</html>


## inherit
- Il valore `inherit` consente alla proprietà `box-sizing` di un elemento di ereditare il suo valore dall'elemento genitore;
- Questo significa che il comportamento di `box-sizing` dell'elemento corrente è determinato dalla proprietà `box-sizing` del suo elemento genitore;
- Può aiutare a garantire un comportamento coerente di `box-sizing` in tutto il documento impostandolo su un contenitore genitore.

Qual è il valore predefinito per la proprietà `box-sizing`?

Se un elemento genitore ha `box-sizing: border-box` e un elemento figlio ha `box-sizing: inherit`, quale valore utilizzerà l'elemento figlio per la proprietà `box-sizing`?

Apprendi le nozioni fondamentali di CSS (Cascading Style Sheets), il linguaggio di stile che trasforma l'aspetto e la presentazione delle pagine web. Esplora concetti chiave come stili del testo, colori, spaziatura, box model, Flexbox ed effetti decorativi. Sviluppa le competenze necessarie per creare pagine web visivamente accattivanti e ben strutturate. Ideale per principianti che desiderano costruire una solida base in CSS.

Scopri cosa è CSS, come collegarlo a HTML e come stilizzare gli elementi HTML utilizzando i selettori. Esplora concetti fondamentali come i colori del testo, le pseudo-classi di azione utente e le variabili in CSS.

Scopri come formattare e stilizzare il testo nelle tue pagine web. Impara ad applicare font personalizzati ed esplora le diverse proprietà dei font per migliorare l'aspetto del testo.

Apprendere i fondamenti del modello a scatola, che definisce il layout e la spaziatura degli elementi in una pagina web. Esplorare concetti come dimensionamento delle scatole, aggiunta di spazio agli elementi, lavoro con elementi a livello di blocco e inline, e utilizzo di pseudo-classi strutturali e funzionali per una stilizzazione avanzata.

Scopri Flexbox, un potente metodo di layout CSS per disporre gli elementi in righe e colonne. Impara a controllare la direzione, l'allineamento e la spaziatura degli elementi orizzontalmente e verticalmente, oltre a personalizzare i singoli elementi flex per layout precisi.

Scopri come migliorare l'aspetto visivo delle tue pagine web con CSS. Esplora tecniche per applicare colori e immagini di sfondo, stilizzare le immagini, utilizzare pseudo-elementi decorativi e aggiungere ombre per creare design accattivanti.

Comprendere il Box Sizing in CSS

Output

inherit

1. Qual è il valore predefinito per la proprietà `box-sizing`?

2. Se un elemento genitore ha `box-sizing: border-box` e un elemento figlio ha `box-sizing: inherit`, quale valore utilizzerà l'elemento figlio per la proprietà `box-sizing`?

Awesome!

Comprendere il Box Sizing in CSS

Output

inherit

1. Qual è il valore predefinito per la proprietà `box-sizing`?

2. Se un elemento genitore ha `box-sizing: border-box` e un elemento figlio ha `box-sizing: inherit`, quale valore utilizzerà l'elemento figlio per la proprietà `box-sizing`?

Comprendere il Box Sizing in CSS

Output

inherit

1. Qual è il valore predefinito per la proprietà box-sizing?

2. Se un elemento genitore ha box-sizing: border-box e un elemento figlio ha box-sizing: inherit, quale valore utilizzerà l'elemento figlio per la proprietà box-sizing?

Awesome!

Comprendere il Box Sizing in CSS

Output

inherit

1. Qual è il valore predefinito per la proprietà box-sizing?

2. Se un elemento genitore ha box-sizing: border-box e un elemento figlio ha box-sizing: inherit, quale valore utilizzerà l'elemento figlio per la proprietà box-sizing?

1. Qual è il valore predefinito per la proprietà `box-sizing`?

2. Se un elemento genitore ha `box-sizing: border-box` e un elemento figlio ha `box-sizing: inherit`, quale valore utilizzerà l'elemento figlio per la proprietà `box-sizing`?

1. Qual è il valore predefinito per la proprietà `box-sizing`?

2. Se un elemento genitore ha `box-sizing: border-box` e un elemento figlio ha `box-sizing: inherit`, quale valore utilizzerà l'elemento figlio per la proprietà `box-sizing`?