Trabalhando com margens margin em CSS

Agora vamos analisar a propriedade margin, que define as margens entre os elementos de um site. Vamos ver como isso funciona na prática.

Para começar, vou mostrar dois blocos aninhados sem margin (eles ficarão colados e veremos uma borda dupla):

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 agora vamos definir um margin de 30px para o bloco 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;
}

Результат: