CSS box-sizing
La proprietà CSS box-sizing controlla il calcolo delle dimensioni dell'elemento (CSS3)
La proprietà box-sizing determina come vengono calcolate le dimensioni di un elemento. Con content-box, le dimensioni non includono il padding e il bordo. Con border-box, invece, le dimensioni totali comprendono anche questi elementi, rendendo il layout più facile da gestire, specialmente per i layout complessi.
Sintassi
Significato dei valori principali:
-
content-box: Il valore predefinito. Le dimensioni specificate (larghezza e altezza) si riferiscono solo al contenuto dell'elemento, escludendo il padding e il bordo.
-
border-box: Le dimensioni specificate (larghezza e altezza) includono anche il padding e il bordo, rendendo l'elemento più facile da gestire in layout complessi.
Esempio proprietà: box-sizing
Codice Esempio: box-sizing
.box-sizing-example {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #50a14f;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
box-sizing: border-box; /* Includi il padding e il bordo nelle dimensioni */
}.box-sizing-example-content-box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #50a14f;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
box-sizing: content-box; /* Escludi il padding e il bordo dalle dimensioni */
}
Contenuto Esempio: box-sizing
Esempio di utilizzo di box-sizing
In questo esempio, la proprietà box-sizing viene utilizzata per gestire le dimensioni di un elemento, includendo o meno il padding e il bordo nel calcolo delle dimensioni totali.
CSS e HTML per l'elemento con box-sizing:
<style>
.box-sizing-example {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #50a14f;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
box-sizing: border-box; /* Includi il padding e il bordo nelle dimensioni */
}
.box-sizing-example-content-box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #50a14f;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
box-sizing: content-box; /* Escludi il padding e il bordo dalle dimensioni */
}
</style>
<div class="box-sizing-example">
Box-sizing: border-box
</div>
<div class="box-sizing-example-content-box">
Box-sizing: content-box
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
