Box model | Guida creare con i CSS

Box model


Tutti gli elementi HTML possono essere considerati come caselle. Nei CSS, il termine "box model" viene usato quando si parla di design e layout.

Il modello di box CSS è essenzialmente una scatola (box) che avvolge ogni elemento HTML. Consiste di: margini, bordi, spaziatura e contenuto effettivo. L'immagine sotto illustra il modello di box model:


Spieghiamo le diverse parti:

  • Contenuto: Il contenuto è la parte dove vengono visualizzati testo e immagini e viene definito attraverso l'impostazione della sua larghezza (width) e della sua lunghezza (height)
  • Padding: E' l'area intorno al contenuto. Questa area è trasparente.
  • Border: E' un bordo che circonda il contenuto e l'area intorno al contenuto (il padding). Se viene inserita è solida e ne viene indocato lo spessore in px e il colore.
  • Margin: E' l'area vuota che separa tutto il contenuto del box dal resto della pagina web.


Box model - esempio codice CSS

div {
 width: 300px;
 border: 25px solid green;
 padding: 25px;
 margin: 25px;
}


Box model con larghezza minima e massima - esempio codice CSS

p {
 width: 100%;
 min-width: 500px;
 max-width: 1000px;
 border: 0px;
 padding: 25px;
 margin: 25px;
}


Box model con altezza minima e massima e colore di sfondo - esempio codice CSS

pre {
 width: 100%;
 height: 100%;
 min-height: 50px;
 max-height: 800px;
 background-color: #eeeeee;
}