Modello a blocchi HTML

9.1 Elementi a blocco

Modello a blocchi HTML — è un concetto che descrive la struttura e la visualizzazione degli elementi HTML in un documento. Aiuta gli sviluppatori a capire come gli elementi interagiscono tra di loro e come sono posizionati sulla pagina. Comprendere il modello a blocchi è importante per creare pagine web strutturate ed esteticamente gradevoli.

Il modello a blocchi HTML è composto da due tipi principali di elementi: blocchi e inline. Questi elementi giocano un ruolo chiave nella creazione del layout delle pagine web.

Elementi a blocco

Esempio di elemento a blocco:

    
      <div>
        <h1>Intestazione</h1>
        <p>Questo è un paragrafo di testo all'interno di un elemento div a blocco.</p>
      </div>
    
  

9.2 Elementi inline

Elementi inline (inline-level elements) occupano solo la larghezza necessaria per il loro contenuto e non iniziano su una nuova riga. Possono contenere solo elementi inline o testo. Esempi di elementi inline:

Esempio di elemento inline:

    
      <span>Questo è un paragrafo con <strong>testo in grassetto</strong> e <em>corsivo</em>.</span>
    
  

9.3 Componenti del modello a blocchi

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

• Contenuto (Content): contenuto interno dell'elemento, ad esempio testo o immagine
• Padding: spazio tra il contenuto e il bordo dell'elemento
• Bordo (Border): linea che circonda il padding e il contenuto
• Margine (Margin): spazio tra il bordo dell'elemento e gli elementi adiacenti

Visualizzazione del modello a blocchi:

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

Esempio HTML con modello a blocchi:

In questo esempio, l'elemento <div> con la classe "box" ha una larghezza di 200px, un padding di 10px, un bordo di 2px e un margine di 20px. Queste proprietà determinano come l'elemento viene visualizzato sulla pagina e interagisce con altri elementi.

    
      .box {
        width: 200px;
        padding: 10px;
        border: 2px solid red;
        margin: 20px;
      }
    
  

    
      <div class="box">
        Questo è un esempio di modello a blocchi.
      </div>