[SOLUCIONADO] Problema borde superior

[pupefo]

Buenas amigos!!!

Tengo un problema a la hora de poner bordes a una capa, es el siguiente:

Cuando pongo todos los bordes menos el superior, todo perfecto, pero el superior me genera un margen entre la capa principal y otra de dentro:

Código HTML:

<div id='principal'>

            <div id='secundario'></div>
      </div> 

Este es su CSS:

Código:

#principal
{
    width: 416px;
    height: 256px;
    margin: auto;
    background-color: #E0F2F7;
    margin-top: 120px;
    border: 1px solid black;
    /*  border-top: none;  */
}

#secundario
{
    width: 100%;
    height: 40px;
    background-color: #8FBCDB;
    text-align: center;
    
}

El problema está en el CSS, pero no lo sé!!!


Un saludo y Gracias!!

[pzin]

Con ese código no consigo reproducir el problema que dices.

[pupefo]

Voy a intentar pasar una captura y te explico más detallado.

Hasta Pronto!!

[pupefo]

Ejemplo

La capa en la pone 'identificación', se baja al poner el borde superior...

Las medidas están bien...

[pzin]

Pon el codigo HTML y CSS completo de todo eso.

Sospecho que tiene que ver con el colapsamiento. Prueba ponerle a #principal un overflow: hidden.

[pupefo]

HTML:

Código HTML:

<div id="ad_loguer">
            
            <form action ="Controller.php?pista=1" method="POST">
            
            <div id="ad_loguer_titu"> <p id="ad_loguer_titu_text">Identificaci&oacuten</p> </div>
            
            
            <div id="ad_loguer_user"> <p id="ad_loguer_user_text">Usuario:  <input type="text" id="user" name="user" required /> </p></div>
            
            <div id="ad_loguer_pass"> <p id="ad_loguer_user_text">Contraseña: <input type="password" id="pass" name="pass" required /> </p> </div>
            
            <div id="ad_loguer_entrar"> <input type="submit" value="ENTRAR" />
               </div>
            
           </form> 
            <div id="ad_loguer_recordar"> <a href=""> <p id="ad_loguer_recordar_text">*olvid&eacute contraseña*</p> </a> </div>
            
        </div> 

CSS:

Código:

#ad_loguer
{
    width: 416px;
    height: 256px;
    margin: auto;
    background-color: #E0F2F7;
    margin-top: 120px;
    border: 1px solid black;
       /* border-top: none; */ 
        
}

#ad_loguer_titu
{
    width: 100%;
    height: 40px;
    background-color: #8FBCDB;
    text-align: center;
}

#ad_loguer_user, #ad_loguer_pass
{
    width: 80%;
    height: 50px;
    margin: auto;
    text-align: center;
}

#ad_loguer_entrar
{
    width: 25%;
    height: 25px;
    margin-top: 10px;
    float: left;
    text-align: right;
}

#ad_loguer_recordar
{
    width: 150px;
    height: 25px;
    float: right;
    margin-top: 10px;
    text-align: right;
}

Seguramente sea una chorrada....

[pzin]

El párrafo por defecto tiene un margen especificado. Y de ahí viene el margen. Tienes que quitarlo:

Código CSS:

div#ad_loguer_titu p {
  margin: 0;
}
 

Lo de que desaparezca con el borde superior es a causa de que se colapsa.

[pupefo]

SII !! Perfecto tio !!

uff soy muy panoli. Bueno Hasta Pronto!!