Modello Box in CSS | Spiegato

CSS, un acronimo del foglio di stile a cascata viene utilizzato per modellare elementi HTML e ogni contenuto che vedi in una pagina web è un elemento in HTML E.G testo, icone, pulsanti e immagini. Ogni elemento consuma un po 'di spazio sulla pagina web e quello spazio occupato dall'elemento HTML è noto come la scatola di quell'elemento. Il modello box può essere rappresentato come l'area occupata dall'elemento HTML che consiste ulteriormente in diverse proprietà come imbottitura, margine e confini.

Questo articolo fornirà una guida passo-passo per comprendere il modello CSS Box e impareremo in dettaglio ciascuna delle proprietà di seguito descritte con l'aiuto di esempi:

• Area di contenuto nel modello di scatola
• Imbottitura nel modello di scatola
• Borders in Box Model
• Margine nel modello a scatola

Quindi, senza ritardo, procediamo!

Area di contenuto nel modello di scatola

Il contenuto è una delle parti più significative del modello della scatola che viene utilizzata per mostrare il testo, le immagini, ecc., e lo spazio richiesto per visualizzare il contenuto è noto come area del contenuto. L'area del contenuto può essere ridimensionata utilizzando altezza e larghezza proprietà.

È presente al centro del modello di scatola ed è evidenziato come un'area blu nella figura seguente:

Imbottitura nel modello di scatola

L'imbottitura non è altro che lo spazio attorno al contenuto, è presente al di fuori del contenuto e all'interno dell'area di confine. Possiamo controllare l'imbottitura di ciascun lato separatamente o possiamo impostare l'imbottitura di tutti i lati contemporaneamente usando il imbottitura proprietà. L'imbottitura è evidenziata come un'area verde nella figura indicata di seguito:

Bordo nel modello di scatola

Il bordo mostra l'imbottitura e all'interno del margine. I bordi possono essere impostati attorno a qualsiasi elemento HTML, possiamo specificare le proprietà del bordo per ciascun lato i.e. in alto, a sinistra, a destra e in basso usando il Proprietà di confine, bordo-sinistra, bordo-destra, bordo-fondo rispettivamente. Possiamo impostare l'intero bordo allo stesso tempo usando confine proprietà. Il bordo è evidenziato come un'area gialla nella figura fornita di seguito:

Margine nel modello a scatola

Lo spazio fuori dal confine è chiamato margine. IL margine La proprietà imposta il margine su ciascun lato individualmente o nel suo insieme. Il margine è evidenziato come un'area arancione nella seguente figura menzionata:

Esempio

Consideriamo un esempio per comprendere l'intero concetto del modello di scatola:

Contenuto: un elemento HTML presente al centro della scatola
modello
Imbottitura: l'imbottitura non è altro che lo spazio attorno al contenuto, è presente al di fuori del contenuto e all'interno del
area di confine
Borde: il bordo mostra l'imbottitura e all'interno del margine
Margine: lo spazio fuori dalla finestra di confine si chiama margine

Lo snippet di cui sopra imposta la larghezza del contenuto 500px, altezza 100px, bordo 5px e imbottitura 10px, di conseguenza mostra la seguente uscita:

Il redox del righello viene utilizzato per calcolare l'altezza e la larghezza, mostra la larghezza totale equivale a 530 e l'altezza totale è uguale a 130.

Come verificare la larghezza e l'altezza del modello di scatola

Larghezza totale = margino sinistro + bordo sinistro + padding sinistro + larghezza dell'area del contenuto + pagamento destro + bordo destro + margine destro
Larghezza = 0px + 5px + 10px + 500px + 10px + 5px + 0px = 530px Altezza totale = margine-top + bordo-top + imbottitura + altezza del contenuto + imbottitura-bottom + bordo-bottom + margin-bottom
Altezza = 0 + 5px + 10px + 100px + 10px + 5px + 0px = 130px

Conclusione

Il modello a scatola specifica il design e il layout di qualsiasi pagina Web utilizzando più proprietà CSS come bordo, altezza, larghezza, margine e imbottitura. Questo articolo ha dimostrato una panoramica completa del modello CSS Box in cui abbiamo imparato come utilizzare il modello Box per personalizzare il layout di qualsiasi elemento HTML.