Margini

2.1 Margini interni (Padding)

I margini interni (padding) determinano lo spazio tra il contenuto dell'elemento e i suoi bordi. Puoi impostare il padding individualmente per ciascun lato dell'elemento: in alto, a destra, in basso e a sinistra. I margini interni possono essere utili per creare spazio attorno al contenuto dell'elemento, per evitare che aderisca completamente ai bordi.

Esempio di utilizzo

In questo esempio, all'elemento con la classe .padding vengono applicati margini interni di 20 pixel su tutti i lati, creando uno spazio intorno al contenuto.

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

    
      <div class="padding">
        Questo è un elemento con margini interni.
      </div>
    
  

2.2 Margini esterni (Margin)

I margini esterni (margin) determinano lo spazio tra un elemento e gli elementi adiacenti. I margini esterni possono essere impostati per ciascun lato dell'elemento: sopra, a destra, sotto e a sinistra. I margini esterni sono utili per creare spazio tra gli elementi, per evitare che si sovrappongano.

Esempio di utilizzo:

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

    
      <div class="margin">
        Questo è un elemento con margini esterni.
      </div>
    
  

2.3 Interazione tra i componenti del modello a blocchi

Tutti e quattro i componenti del modello a blocchi (contenuto, margini interni, bordi e margini esterni) lavorano insieme per determinare la dimensione complessiva e la posizione di un elemento sulla pagina.

Esempio di interazione tra componenti:

    
      .box {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px solid #000;
        margin: 30px;
        width: 200px;
      }
    
  

    
      <div class="box">
        Questo è un elemento con margini interni ed esterni.
      </div>
    
  

Spiegazione del codice:

• Contenuto: testo all'interno dell'elemento
• Margini interni: 20 pixel, creando spazio tra il contenuto e il bordo
• Bordi: 5 pixel che circondano l'elemento
• Margini esterni: 30 pixel, creando spazio tra l'elemento e gli altri elementi sulla pagina

2.4 Margini esterni negativi

I margini esterni possono avere valori negativi, il che porta a sovrapposizioni di elementi.

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

    
      <div>
        Questo è un elemento normale
      </div>
      <div class="negative-margin">
        Questo è un elemento con margine superiore negativo.
      </div>
    
  

2.5 Collasso dei margini esterni

Quando i margini esterni verticali di due blocchi adiacenti si incontrano, possono collassare formando un singolo margine pari al maggiore dei due.

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

      .box2 {
        background-color: #d0d0d0;
        padding: 20px;
        border: 2px solid #000;
        margin-top: 20px;
      }
    
  

    
      <div class="box1">
        Questo è il primo elemento.
      </div>

      <div class="box2">
        Questo è il secondo elemento. I margini esterni sono collassati a 30 pixel.
      </div>