Dimensionamento del box

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 39 di 76.

In CSS, box-sizing è una proprietà che determina come vengono calcolate la larghezza e l’altezza totali di un elemento. Per impostazione predefinita, le proprietà width e height includono solo le dimensioni del contenuto e non tengono conto di spaziatura interna, bordi o margini. Tuttavia, usando la proprietà box-sizing, puoi modificare questo comportamento e fare in modo che le proprietà width e height includano anche le dimensioni della spaziatura interna e dei bordi.

Questo può semplificare i calcoli del layout e prevenire problemi di dimensionamento imprevisti.

Ecco la sintassi di base per usare la proprietà box-sizing:

selector {
    box-sizing: value;
}

value: Il comportamento desiderato per il dimensionamento della casella, che può essere uno dei seguenti:

content-box: Questo è il valore predefinito. Le proprietà width e height includono solo le dimensioni del contenuto. Padding, bordi e margini vengono aggiunti all'esterno della larghezza e dell'altezza specificate.

border-box: Le proprietà width e height includono le dimensioni del contenuto, del padding e del bordo. I margini vengono comunque aggiunti all'esterno dell'elemento.

Per esempio:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Comportamento predefinito */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

In questo esempio, l'elemento <div> ha un valore box-sizing pari a content-box. Ciò significa che la larghezza effettiva visualizzata di <div> sarà 300px (contenuto) + 40px (padding sinistro e destro) + 10px (bordo sinistro e destro) = 350px. L'altezza verrà calcolata in modo analogo.

D'altra parte, l'elemento con la classe container ha un valore box-sizing pari a border-box. In questo caso, la width specificata di 400px includerà il contenuto, il padding e il bordo. L'area effettiva del contenuto si ridurrà per fare spazio al padding e al bordo, ottenendo una larghezza del contenuto di 400px - 60px (padding sinistro e destro) - 20px (bordo sinistro e destro) = 320px. L'altezza verrà calcolata in modo analogo.

Sfida

Facile

Ti viene fornito un documento HTML con due elementi (<div>), ciascuno con una classe diversa. Il tuo compito è usare la proprietà box-sizing per controllare come vengono calcolate la larghezza e l’altezza di questi elementi. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l’elemento <div> con la classe <strong>content-box-div</strong>. Imposta width su 300px, height su 200px, padding su 20px, border su 5px solid blue e box-sizing su content-box.
Scrivi una regola CSS che selezioni l’elemento <div> con la classe <strong>border-box-div</strong>. Imposta width su 300px, height su 200px, padding su 20px, border su 5px solid red e box-sizing su border-box.

Provalo tu

<html>
<head>
    <title>Box Sizing</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="content-box-div">This is a div with content-box.</div>
    <div class="border-box-div">This is a div with border-box.</div>
</body>
</html>