Modello di cornice CSS
- Pagina precedente Altezza/larghezza CSS
- Pagina successiva Contorno CSS
Modello di cornice CSS
Tutti gli elementi HTML possono essere considerati come scatole. In CSS, quando si parla di design e layout, si utilizza il termine 'modello a scatola' o 'modello a riquadro'.
Il modello di cornice CSS è sostanzialmente una cornice che avvolge ogni elemento HTML. Include: margine esterno, bordi, margine interno e contenuto effettivo. La seguente immagine mostra il modello di cornice:
Spiegazione delle diverse parti:
- Contenuto - Il contenuto della cornice, dove viene visualizzato il testo e le immagini.
- Margine interno - Pulire l'area intorno al contenuto. Il margine interno è trasparente.
- Bordo - Circondare il margine interno e il contenuto con i bordi.
- Margine - Pulire l'area al di fuori dei limiti. Il margine è trasparente.
Il modello di cornice ci permette di aggiungere bordi intorno agli elementi e di definire lo spazio tra gli elementi.
La parte più interna della cornice dell'elemento è il contenuto effettivo, diretto avvolto dal margine interno. Il margine interno presenta lo sfondo dell'elemento. L'edge del margine interno è il bordo. Al di fuori del bordo è il margine esterno, che di default è trasparente e non oscura alcun elemento posteriore.
Suggerimento:Lo sfondo viene applicato all'area composta da contenuto, margine interno e bordi.
Il margine interno, i bordi e il margine esterno sono opzionali e il valore predefinito è zero. Tuttavia, molti elementi verranno impostati dallo stile dell'agente utente. È possibile sovrascrivere questi stili dei browser impostando il margine e il margine interno dell'elemento a zero. Questo può essere fatto separatamente o utilizzando un selettore universale per impostare tutti gli elementi:
* {
margine: 0;
margine interno: 0;
}
In CSS, width e height si riferiscono alla larghezza e all'altezza dell'area di contenuto. L'aumento del margine interno, dei bordi e del margine esterno non influisce sulle dimensioni dell'area di contenuto, ma aumenta la dimensione totale della cornice dell'elemento.
Supponiamo che ciascun lato della cornice abbia un margine esterno di 10 pixel e un margine interno di 5 pixel. Se si desidera che questa cornice raggiunga 100 pixel, è necessario impostare la larghezza del contenuto a 70 pixel, come illustrato nell'immagine sottostante:
#box {
larghezza: 70px;
margine: 10px;
margine interno: 5px;
}
Suggerimento:Il margine interno, i bordi e il margine esterno possono essere applicati a tutti i lati di un elemento o a un lato singolo.
Suggerimento:Il margine può essere negativo e, in molti casi, è necessario utilizzare margini negativi.
Esempio
Esempio di modello di cornice:
div {
larghezza: 300px;
bordo: 15px solido verde;
margine interno: 50px;
margine: 20px;
}
Larghezza e altezza dell'elemento
Per impostare correttamente la larghezza e l'altezza dell'elemento in tutti i browser, è necessario conoscere come funziona il modello di cornice.
Attenzione importante:Quando si imposta l'altezza e la larghezza di un elemento utilizzando CSS, è sufficiente impostare l'altezza e la larghezza dell'area di contenuto. Per calcolare la dimensione completa dell'elemento, è necessario aggiungere anche il margine interno, i bordi e il margine esterno.
Esempio
<div> L'ampiezza totale dell'elemento sarà di 350px:
div {
larghezza: 320px;
margine interno: 10px;
bordo: 5px solid gray;
margine: 0;
}
Calcolo come segue:
320px (larghezza) + 20px (margine interno sinistro + destro) + 10px (bordo sinistro + destro) + 0px (margine esterno sinistro + destro) = 350px
Larghezza totale dell'elemento dovrebbe essere calcolata in questo modo:
Larghezza totale dell'elemento = larghezza + margine sinistro interno + margine destro interno + bordo sinistro + bordo destro + margine sinistro esterno + margine destro esterno
L'altezza totale dell'elemento dovrebbe essere calcolata in questo modo:
Altezza totale dell'elemento = altezza + margine superiore interno + margine inferiore interno + bordo superiore + bordo inferiore + margine superiore esterno + margine inferiore esterno
- Pagina precedente Altezza/larghezza CSS
- Pagina successiva Contorno CSS
