Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Class no input ou no label?

Oi, tudo bem? Tenho uma dúvida: Por que a classe "input-padrao" foi colocada dentro das tags < input > mas a classe "checkbox" foi posta dentro da tag < label >? Poderia tudo ter sido dentro de suas respectivas < label >, ou tudo nas < input >?

2 respostas
solução!

Olá Pedro, tudo bem com você?

Acredito que nessa questão é mais entender qual dos componentes estamos trabalhando, por exemplo no input-padrao estamos fazendo configurações que dizem diretamente ao formato do campo de texto, então o padding sendo aplicado a um <input> acaba criando um respiro para digitação, enquanto um padding aplicado no label não vai influenciar muito dado que não há nada dentro dele

A mesma coisa temos com o width, estaríamos colocando uma largura para um elemento que é um texto simples, e o nosso input iria ficar pequeno

Agora a parte do checkbox poderia ter sido colocado tranquilamente no input, mas aqui temos novamente essa questão dos componentes, olhando a estrutura do html, como o <label> envolve o <input> faz mais sentido que ele faça o espaçamento vertical, temos mais ou menos essa situação:

---------------------------------------------------
|
|    Margem Superior
|
<label> 
<input>
`

Enquanto estilizando o input temos algo nesse sentido:

--
|
| <label> 
| <input>

Então por mais que fique igual, estaremos criando um espaçamento apenas no quadradinho do input, enquanto quando aplicado no label conseguimos criar um espaçamento por toda caixa

Mas na maioria das vezes temos esse comportamento de estilizar o input para definir largura, altura, espaçamento, e deixamos para o label para lidar com a questão de margem e algumas coisas como estilização do rótulo (como cor, fonte, etc.) :)

Conseguiu Compreender?

Abraços!

Opa, deu pra entender sim, Geovani, for bem elucidativo! Obrigado pela resposta :)

Abraços!