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>
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.
