Lavorare con i margini margin in CSS

Ora analizzeremo la proprietà margin, che imposta i margini tra gli elementi del sito. Vediamo come funziona nella pratica.

Per cominciare, vi mostro due blocchi annidati l'uno nell'altro senza margin (si compatteranno e vedremo un doppio bordo):

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 300px;
  border: 1px solid red;
}
#child {
  height: 100px;
  border: 1px solid green;
}

Результат:

E ora impostiamo un margin di 30px al blocco interno:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 300px;
  border: 1px solid red;
}

#child {
  height: 100px;
  border: 1px solid green;
  margin: 30px;
}

Результат: