Introduzione al modello a blocchi

1.1 Fondamenti del modello a blocchi

Il modello a blocchi è la base per capire come gli elementi vengono disposti e interagiscono tra loro su una pagina web. Determina la struttura e le dimensioni degli elementi HTML, nonché il modo in cui sono circondati da padding, bordi e margini.

Fondamenti del modello a blocchi

Il modello a blocchi CSS descrive la composizione dei blocchi degli elementi HTML. Ogni elemento è composto da quattro componenti principali:

• Contenuto (content).
• Padding (padding).
• Bordi (border).
• Margini (margin).

Questi componenti determinano come un elemento verrà visualizzato e come interagirà con gli altri elementi sulla pagina.

Contenuto (Content)

Il contenuto (content) è la parte principale dell'elemento, dove si trova il testo, le immagini o altri elementi annidati. Le dimensioni del contenuto possono essere definite esplicitamente tramite le proprietà width e height, o determinate dal contenuto dell'elemento.

Esempio d'uso

In questo esempio il contenuto dell'elemento .content include il testo "Questo è il contenuto dell'elemento.":

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        Questo è il contenuto dell'elemento.
      </div>
    
  

1.2 Visualizzazione del modello a blocchi

Ogni elemento nel modello a blocchi può essere rappresentato come un blocco rettangolare composto dalle seguenti parti:

• Contenuto (Content): il contenuto interno dell'elemento, ad esempio, testo o immagine
• Interno (Padding): lo spazio tra il contenuto e il bordo dell'elemento
• Bordo (Border): la linea che circonda l'interno e il contenuto
• Esterno (Margin): lo spazio tra il bordo dell'elemento e gli elementi vicini

Visualizzazione del modello a blocchi:

    
      .element {
        width: 200px;           /* Larghezza del contenuto */
        padding: 10px;          /* Interno */
        border: 2px solid red;  /* Bordo */
        margin: 20px;           /* Esterno */
      }
    
  

1.3 Bordi (Border)

I bordi (border) circondano il contenuto e il padding dell'elemento. I bordi possono avere vari stili, spessori e colori. I bordi possono essere utilizzati per evidenziare visivamente gli elementi sulla pagina.

Esempio d'uso

In questo esempio all'elemento .border è applicato un bordo spesso 5 pixel, tratteggiato e di colore nero, che circonda il contenuto e il padding.

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        Questo è un elemento con bordo.
      </div>