Dimensionamento scatola - Trucchi CSS

Anonim

La box-sizingproprietà in CSS controlla come viene gestito il box model per l'elemento a cui si applica.

.module ( box-sizing: border-box; )

Uno dei modi più comuni per usarlo è applicarlo a tutti gli elementi della pagina, inclusi gli pseudo elementi:

*, *::before, *::after ( box-sizing: border-box; )

Questo è spesso chiamato "dimensionamento universale della scatola" ed è un buon modo di lavorare! Il (letterale) widthche imposti è la larghezza che ottieni, senza dover eseguire calcoli mentali e gestire la complessità che deriva dalle larghezze che provengono da più proprietà. Abbiamo anche una giornata di sensibilizzazione sulle dimensioni delle scatole qui intorno.

Valori

  • content-box: il predefinito. I valori di larghezza e altezza si applicano solo al contenuto dell'elemento. L'imbottitura e il bordo vengono aggiunti all'esterno della scatola.
  • padding-box: I valori di larghezza e altezza si applicano al contenuto dell'elemento e al suo riempimento. Il bordo viene aggiunto all'esterno della scatola. Attualmente, solo Firefox supporta il padding-boxvalore.
  • border-box: I valori di larghezza e altezza si applicano a contenuto, spaziatura interna e bordo.
  • inherit: eredita il dimensionamento del riquadro dell'elemento genitore.

Esempio

Questa immagine di esempio confronta l'impostazione predefinita content-box(in alto) con border-box(in basso):

La linea rossa tra le immagini rappresenta il valore di larghezza degli elementi. Si noti che l'elemento con il valore predefinito box-sizing: content-box;supera la larghezza dichiarata quando il riempimento e il bordo vengono aggiunti all'esterno della casella del contenuto, mentre l'elemento con box-sizing: border-box;applicato si adatta completamente alla larghezza dichiarata.

Utilizzo del dimensionamento della scatola

Diciamo che imposti un elemento su width: 100px; padding: 20px; border: 5px solid black;. Per impostazione predefinita, la casella risultante è larga 150 px. Questo perché il modello di dimensionamento del riquadro predefinito è content-box, che applica la larghezza dichiarata di un elemento solo al suo contenuto, posizionando il riempimento e il bordo fuori dal riquadro dell'elemento. Ciò aumenta efficacemente lo spazio occupato dall'elemento.

Se si modifica box-sizingin padding-box, il riempimento viene inserito nella casella dell'elemento. Quindi, la scatola sarebbe larga 110 px, con 20 px di imbottitura all'interno e 10 px di bordo all'esterno. Se vuoi mettere l'imbottitura e il bordo all'interno della scatola, puoi usare border-box. La casella sarebbe quindi larga 100 px: i 10 px di bordo e 20 px di riempimento vengono entrambi inseriti nella casella dell'elemento.

Demo

Vedi il Confronto della penna dei valori di dimensionamento della scatola di CSS-Tricks (@ css-tricks) su CodePen.

Relazionato

  • width
  • height
  • padding
  • border

Supporto browser

Cromo Safari Firefox musica lirica IE Android iOS
Qualunque *† 3 * † 1 ‡ 7 * 8 * 2.1 * † Qualunque *

* padding-boxnon supportato

† le versioni precedenti richiedono il -webkitprefisso (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozprefisso richiesto fino alla versione 28, non prefisso dalla 29.