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 >?
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 >?
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!