Trabajo con márgenes margin en CSS

Ahora vamos a analizar la propiedad margin, que establece los márgenes entre los elementos del sitio. Veamos cómo se ve esto en la práctica.

Para empezar, les mostraré dos bloques anidados uno dentro del otro sin margin (se pegarán y veremos un borde doble):

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

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

Результат:

Y ahora establezcamos un margin de 30px al bloque 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;
}

Результат: