Problema no placeholder e texto no input do html

Programação e Desenvolvimento
1

Boa noite pessoal, estou com um problema nos inputs do meu codigo, eles nao ficam no inicio da tag, ficam no meio, junto com o placeholder, imagem:

Screenshot from 2020-08-16 20-51-46

Codigo do input:
#content .login-content input{
display: flex;
flex-direction: column;
margin-bottom: 15px;

position: relative;

padding: 20px 100px;
border-radius: 5px;
border: 1px solid #dddfe2;
outline: none;
width: 100%;

}

Do placeholder.

#content .login-content input::placeholder{
font-size: 16px;
display: flex;
position: absolute;
}

Primeiro clone de interface da minha vida, me ajudem please!

2

não entendi, você quer deixa o texto no ínicio da tag?
tenta um text-align: left;

1 curtida
3

isso está acontecendo por causa do padding que você definiu no elemento input, vai afetar tanto o placeholder como o input do usuário, na minha opinião o ideal seria fazer um mix em ambos:

Explicando melhor → regras CSS definidas no elemento valem para todas as pseudo-classes do elemento, a não ser que sejam modificadas nessas, a depender da propriedade important.

1 curtida
4

Experimenta:

padding: 20;

1 curtida
5

Complementando a resposta do @Natanael.755 , segue um exemplo explicativo de como funciona o padding:

/* Aplica-se à todas as bordas */
padding: 20px;

/* vertical | horizontal */
padding: 20px 10px;

/* superior | horizontal | inferior */
padding: 30px 20px 10px; 

/* superior | direita | inferior | esquerda */
padding: 40px 30px 20px 10px ;

Referencia: MDN - Padding

:+1:t2:

2 curtidas
6

Vlwww mano, eu me perdi nas configurações XD

7

Exatamente, porém já consegui resolver com a resposta do @Natanael.755, vlw

@Natanael.755 Vlw mano, muito obrigado!