Padding Input
05/09/2017
0
Pessoal estou tentando centralizar um formulário e os inputs de forma responsiva porém acontece o seguinte, quando eu insiro o atributo padding no elemento input , os campos ficam deslocados a direita. Quando eu não coloco o padding no input fica centralizado perfeitamente.
.box-login h2{color:#1a6761; text-align:center;}
.box-login{width:100%; padding:20px 0; background-color:#CCC;}
.box-login form{width:30%; padding:64px; margin:auto; background-color: #399;}
.box-login input{width:100%; padding:0px; margin-bottom:10px; height:36px; border-radius:5px; padding:0 12px;}
.box-login form button{width:100%; background-color:#00bfb1; border:none; height:50px; color:#fff; cursor:pointer;}
Eduardo
Curtir tópico
+ 0
Responder
Post mais votado
19/09/2017
Olá Eduardo,
tudo bem?
Geralmente quando queremos adicionar um espaçamento com o uso do padding, você deve subtrair esses pixels do seu width.
Eu criei um modelo de formulário usando a sua class box-login, dá uma olhada como ficou:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teste</title>
<style>
* {padding: 0; margin: 0; border: 0;}
.topo{background-color: #d7d7d7;padding:2% 0;width:100%; height:auto;}
.topo h1{text-align:center; color:#2e3192;}
.corpo{width:100%; height:auto; background-color:#f0f0ff;padding:3% 0;}
.corpo h2{text-align:center; color:#2e3192;margin:2% 0;}
.box-login{width:50%;height:auto; margin: 0 auto;background-color:#2e3192;padding:5% 0;}
.box-login input{padding:2% 0;width:96%;margin: 2%;border-radius:5px;}
.box-login button{padding:1% 0;width:46%; height:auto; margin: 2%;text-align:center;background-color: #d7d7d7;font-size:1.1em;float:right;border-radius:5px;}
@media (max-width: 830px) {.box-login button{width:96%;}}
</style>
</head>
<body>
<header class="topo">
<h1>Topo</h1>
</header>
<section class="corpo">
<h2>Exemplo Formulário</h2>
<form class="box-login" method="post" action="seuarquivo.php">
<input type="text" name="camponome" placeholder="Seu nome">
<input type="email" name="campoemail" placeholder="email@exemplo.com.br">
<button type="submit" class="btn btn-success">Sim, Quero receber!</button>
</form>
</section>
</body>
</html>
--
Sugiro que utilize o Bootstrap versão 3 ou 4 com HTML, com ele é possível deixar o layout responsivo e ganhamos tempo de desenvolvimento.
Dá uma olhada nesse link: https://getbootstrap.com/docs/3.3/css/#forms
Espero ter ajudado!
Abraços,
Cida Luna - São Carlos,SP.
tudo bem?
Geralmente quando queremos adicionar um espaçamento com o uso do padding, você deve subtrair esses pixels do seu width.
Eu criei um modelo de formulário usando a sua class box-login, dá uma olhada como ficou:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teste</title>
<style>
* {padding: 0; margin: 0; border: 0;}
.topo{background-color: #d7d7d7;padding:2% 0;width:100%; height:auto;}
.topo h1{text-align:center; color:#2e3192;}
.corpo{width:100%; height:auto; background-color:#f0f0ff;padding:3% 0;}
.corpo h2{text-align:center; color:#2e3192;margin:2% 0;}
.box-login{width:50%;height:auto; margin: 0 auto;background-color:#2e3192;padding:5% 0;}
.box-login input{padding:2% 0;width:96%;margin: 2%;border-radius:5px;}
.box-login button{padding:1% 0;width:46%; height:auto; margin: 2%;text-align:center;background-color: #d7d7d7;font-size:1.1em;float:right;border-radius:5px;}
@media (max-width: 830px) {.box-login button{width:96%;}}
</style>
</head>
<body>
<header class="topo">
<h1>Topo</h1>
</header>
<section class="corpo">
<h2>Exemplo Formulário</h2>
<form class="box-login" method="post" action="seuarquivo.php">
<input type="text" name="camponome" placeholder="Seu nome">
<input type="email" name="campoemail" placeholder="email@exemplo.com.br">
<button type="submit" class="btn btn-success">Sim, Quero receber!</button>
</form>
</section>
</body>
</html>
--
Sugiro que utilize o Bootstrap versão 3 ou 4 com HTML, com ele é possível deixar o layout responsivo e ganhamos tempo de desenvolvimento.
Dá uma olhada nesse link: https://getbootstrap.com/docs/3.3/css/#forms
Espero ter ajudado!
Abraços,
Cida Luna - São Carlos,SP.
Aparecida Gonçalves
Responder
Clique aqui para fazer login e interagir na Comunidade :)