0

Estoy creando un formulario con html y ccs y me di cuenta de que al darle 100% de ancho a un input este se debería ajustar al tamaño del contenedor, pero no es así, el input sobrepasa el contenedor. ¿No debería quedar dentro del contenedor? Si le doy un tamaño de 300px al contenedor padre, el input debería ajustar su tamaño a un máximo de 300px pero este se sale del contenedor.

De igual manera si le doy un padding al input de 40px de izquierda y a 40px a la derecha para agregar unos iconos, también se comporta de esta manera. el padding no debería empujar hacia dentro el contenido del mismo sin alterar el tamaño del input? tampoco entiendo por qué se pasa del tamaño del contenedor. Me gustaria saber el motivo y como arreglarlo.

body {
  width: 100vw;
  height: 100vh;
  background-color: bisque;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.login {
  max-width: 300px;
  height: 200px;
  background-color: cadetblue;
}
.inputs {
  width: 100%;
  height: 50px;
}
.conPadding {
  padding-left: 40px;
  padding-right: 40px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prueba</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="container">
      <div class="login">
        <label for="">Name</label>
        <input type="text" class="inputs" />
        <input type="text" class="inputs conPadding" />
      </div>
    </div>
  </body>
</html>

1 respuesta 1

2

tu problema es que al no usar box sizing para todos los elementos (el * se lo aplica a todos) los padding sobresalen de los contenedores. Si a box sizing le das border box eso asegura que todo quede contenido dentro de la caja contenedora del elemento

body {
  width: 100vw;
  height: 100vh;
  background-color: bisque;
}

*{box-sizing: border-box;}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.login {
  max-width: 300px;
  height: 200px;
  background-color: cadetblue;
}
.inputs {
  width: 100%;
  height: 50px;
}
.conPadding {
  padding-left: 40px;
  padding-right: 40px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prueba</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="container">
      <div class="login">
        <label for="">Name</label>
        <input type="text" class="inputs" />
        <input type="text" class="inputs conPadding" />
      </div>
    </div>
  </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.