Establecer margenes en divs que contiene a otros divs

[pixel1]

Hola estoy teniendo el siguiente problema:

Tengo la siguiente estructura html:

Código HTML:

<div id="divLoginBackend">
 <div id="divLoginBackendForm">
  <form method="post" action="" enctype="application/x-www-form-urlencoded">
   <label class="required" for="nombre">Nombre</label>
   <input type="text" value="" id="nombre" name="nombre">
   <label class="required" for="password">Password</label>
   <input type="password" value="" id="password" name="password">
   <input type="submit" value="Enviar" id="enviar" name="enviar">
  </form>
 </div>       
</div> 

Y el siguiente fragmento el css que aplico para esta estructura:

Código HTML:

#divLoginBackend
{
    margin:100px auto auto auto;
    height:210px;
    width:400px;
    background-color:#f2f2f3;
}

#divLoginBackendForm
{
    margin:100px auto auto auto;
    width: 300px;
    display: block;
}

#divLoginBackend label
{
    width:100px;
    float:left;
}

Con esto obtengo un contenedor centrado de 400px por 210px con un fondo gris; y adentro hay otro contenedor con el formulario. El problema es que el segundo contenedor que debería tener un margen de 100px respecto al contenedor padre genera un margen respecto a todo el documento; y si yo hago que crezca ese margen, este aplica para ambos contenedores.

La pregunta es: como debería escribir mi código css para hacer que el segundo contenedor tenga un margen respecto al primero?


Saludos.