¿Como eliminar espacio en los bordes con bootstrap? – html css bootstrap

Pregunta:


Estoy intentando hacer un login con bootstrap y me surgió un problema con los bordes, cuando intento insertar un borde en el formulario se agrega un espacio adicional y se solapa la cabecera de mi formulario, adjunto la imagen para mejor claridad.

Formulario

Entonces la cabecera del formulario queda con ese espacio en blanco, como podría eliminar ese espacio. Adjunto el html

<!DOCTYPE html>
<html lang=es>
  <head>
    <meta charset="utf-8">
    <title>Index</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!--Font to google -->
    <link href="https://fonts.googleapis.com/css?family=Baloo+Chettan" rel="stylesheet">
    <!--Link para acceder a bootstrap-->
    <link rel="stylesheet" href="xxx", filename="xxx")}}">
    <!--Link para acceder a bootstrap-->
    <!--Accede a los estilos css-->
    <link rel="stylesheet" href="{{url_for("xxx", filename = "xxx")}}">
    <!--Accede a los estilos css-->
  </head>
  <body>
  <section class="container login-form">
    <form action="index.html" method="post" id="test" role=login>
      <div id="FormTop" class="form-group">
        <p>Login</p>
      </div>
      <div class="form-group">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
            <input type="text" name="user" placeholder="Username" required class="form-control input-lg" />
          </div>
        </div>
      </div>
      <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                    <input type="password" name="password" placeholder="Password" required class="form-control input-lg" />
                </div>
            </div>
      <div class="form-group">
        <button type="submit" name="go" class="btn btn-lg btn-block btn-success">SIGN IN</button>
      </div>
      <section>
        Not a member? <a href="#">Sign up now <span>&rarr;</span></a>
      </section>
    </form>
  </section>



  <!--scripts for that bootstrap work fine-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="{{url_for("xxx", filename="xxx")}}">

  </script>
  <!--scripts for that bootstrap work fine-->
  </body>
</html>

A continuación adjunto el css

@charset "charset-name";

/* body configuration*/

*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    outline: none;  /* linea que se dibuja en los*/
}

body{
  margin:0 auto;
  padding: 0;
    background-color: #ECF0F1;
    font-family: 'Baloo Chettan', cursive;

}

/******************************Formulario*******************************************/
/*Cuadro de formulario*/

form[role=login]{
  margin: 0 auto;
    height: 300px;
  margin-top: 180px;
  max-width: 400px;
    background-color:white;

}


/*Se configura los elementos relativos dentro del formulario*/

form[role=loging] div {
  position: relative;
}

/*Top of form with login*/
#FormTop
{
    background: #3498DB;
    text-align:center;
    height: 60px;
    font-size: 35px;
    color: white;
    border-color: black;
    border-style: solid;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width:thin;
    border-collapse: none;
}


form[role=login]{
    border-collapse: none;
    border-color: black;
    border-style: solid;
    border-width:1px;

}
/*Se da tamao a los input y button y otras config*/
form[role=login] input,
form[role=login] button {
  font-size:14px;

}

/* se configura el color del icono a lado del input*/
form[role=login] .input-group-addon {
        background: #3498DB;
        font-size: 20px;
        color: white;
}


/*se configura el button */


form[role=login] button {
        background: #3498DB;
        border: none;
        font-size: 20px;
        margin-top: 25px;
        border-radius: 2px;

}



/**************************************************************************/

/*hack to generate minus space*/
.form-group {
    margin: 10px 0;
}
    .form-group input,
    .form-group .input-group-addon {
        border-radius: 2px;
}

form[role=login] > section {
        text-align: center;
        margin: 15px 0;
    }
        form[role=login] > section span {
            color: #767a7f;

        }

Entonces, si quito el borde aplicado, vuelve a la normalidad, pero cuando lo inserto vuelve a tomar un espacio. Alguien que tenga habilidades en bootstrap que me pueda colaborar por favor se los agradezco.

Preguntado por: julian salas

blonfu

La clase .form-group tiene márgenes superior e inferior por lo que tendrías que eliminar ese margen en el div #FormTop. Cuando no tienes borde ese margen no se ve porque colapsan los margenes de ese div y el formulario pero al poner un borde hace de separador y cada elemento mantiene sus propios márgenes.
Lo dicho, si le pones un margin:0 a #FormTop lo solucionas:

/* body configuration*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  /* linea que se dibuja en los*/
}

body {
  margin: 0 auto;
  padding: 0;
  background-color: #ECF0F1;
  font-family: 'Baloo Chettan', cursive;
}


/******************************Formulario*******************************************/


/*Cuadro de formulario*/

form[role=login] {
  margin: 0 auto;
  height: 300px;
  margin-top: 180px;
  max-width: 400px;
  background-color: white;
}


/*Se configura los elementos relativos dentro del formulario*/

form[role=loging] div {
  position: relative;
}


/*Top of form with login*/

#FormTop {
  background: #3498DB;
  text-align: center;
  height: 60px;
  font-size: 35px;
  color: white;
  border-color: black;
  border-style: solid;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: thin;
  border-collapse: none;
  margin:0;

}

form[role=login] {
  border-collapse: none;
  border-color: black;
  border-style: solid;
  border-width: 1px;
}

/*Se da tamao a los input y button y otras config*/

form[role=login] input,
form[role=login] button {
  font-size: 14px;
}


/* se configura el color del icono a lado del input*/

form[role=login] .input-group-addon {
  background: #3498DB;
  font-size: 20px;
  color: white;
}


/*se configura el button */

form[role=login] button {
  background: #3498DB;
  border: none;
  font-size: 20px;
  margin-top: 25px;
  border-radius: 2px;
}


/**************************************************************************/


/*hack to generate minus space*/

.form-group {
  margin: 10px 0;
}

.form-group input,
.form-group .input-group-addon {
  border-radius: 2px;
}

form[role=login] > section {
  text-align: center;
  margin: 15px 0;
}

form[role=login] > section span {
  color: #767a7f;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container login-form">
  <form action="index.html" method="post" id="test" role=login>
    <div id="FormTop" class="form-group">
      <p>Login</p>
    </div>
    <div class="form-group">
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
          <input type="text" name="user" placeholder="Username" required class="form-control input-lg" />
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
        <input type="password" name="password" placeholder="Password" required class="form-control input-lg" />
      </div>
    </div>
    <div class="form-group">
      <button type="submit" name="go" class="btn btn-lg btn-block btn-success">SIGN IN</button>
    </div>
    <section>
      Not a member? <a href="#">Sign up now <span>&rarr;</span></a>
    </section>
  </form>
</section>

Fuente

Related Posts:

Como validar array checkbox – javascript php jquery
Pregunta: Que tal buen dia, alguien me podria decir como se puede hacer para que cuando presione el boton "BAJAR DATOS" si este esta vacio ...
Como cambiar una propiedad html dependiendo del valor de un perfil recogido de clase java – javascript jquery html
Pregunta: Tengo una caja de texto en la que me gustaría poder escribir o no dependiendo del perfil que utilice la aplicación. Esta caja de ...
Usar variable en otra función con javascript – javascript html app
Pregunta: Primero que todo voy a dejar un enlace donde pueden ver el ejemplo funcionando de manera completa. Enlace a la pagina AQUI El valor elegido en ...
¿Cómo rellenar cada circulo al pasar el mouse encima? – javascript jquery html
Pregunta: ¡Hola! Estoy practicando jQuery, y me gustaría poder hacer como un ranking. A lo que quiero llegar es que cada vez que el mouse ...
¿Código html antes del anchor text? ¿Tendrían problemas los motores de búsqueda? – html seo
Pregunta: ¿Es posible incluír código html antes del anchor text y si perjudicaría que los pueda leer el crawler del buscador? Es que necesito que ...
Como podría crear un documento txt y añadirle texto con saltos de línea? – javascript html
Pregunta: Por ejemplo: Hola que tal y lo que quiero que escriba en el documento txt: Hola que tal /* Corregido */ var data = "Hola, rn ¿qué rn ...
insertar automáticamente un caracter mientras escribo en un input – jquery html
Pregunta: Necesito insertar el caracter ":" mientras estoy escribiendo números en un input tipo texto, el ":" debe insertarse automáticamente cuando haya escrito dos números, ...
Estilar un pseudoelemento ::after con jQuery – javascript jquery html
Pregunta: ¿Cómo seleccionar desde jQuery un elemento de este estilo? .page-container .single-page:nth-of-type(2)::after { } La idea es poder modificar ciertas reglas CSS desde JavaScript. ...
¿Cómo obtener el valor de una celda de una tabla con Javascript? – javascript html
Pregunta: Estoy haciendo una parte de ventas y pues, lleno la tabla con datos y lo que quiero es, que al hacer clic sobre una ...
TCPDF ERROR: Some data has already been output, can’t send PDF file – php html
Pregunta: Estoy tratando de generar un reporte PDF utilizando TCPDF, pero al ejecutar mi código salta el siguiente error: TCPDF ERROR: Some data has ...
Quitar parpadeo de animation timing function – javascript html css
Pregunta: tenia una duda. Quería conseguir que el fondo de mi web cambiara usando keyframes. Por ello usé animation-timing-function: step-start;. El problema es que sí ...
Acceder a valores enviados por formulario HTML en PHP – php html formularios
Pregunta: Perdon si cometo algún error, pero soy nuevo en este foro. Quiero hacer una decisión en un bloque de php usando un valor de un ...
Cambiar imágenes del HTML con jQuery – javascript html jquery
Pregunta: Necesito que al cargar la pagina cambie las imágenes del HTML por las del array declarado. Código Javascript: var productos = new Array( ...
Almacenar ‘form’ en una variable – Meteor – javascript html meteor
Pregunta: Estoy intentado almacenar una entrada por telcado o input en una variable, pero cuando intento intento imprimirla me devuelve vacío. Se trata de un login ...
HTML/CSS renderizado de manera extraña – html css less
Pregunta: Tengo un problema con el renderizado HTML/CSS. Cómo es posible que de éste código: <div class="gal-preview"> <div class="thumbnail"> ...

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *