1
resposta

Em determinadas situações, qual a diferença prática do padding para margin, estruturalmente falando?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Neste caso, estamos trabalhando dentro domain e criamos uma classe para o checkbox "Gostaria de receber nossas novidades por e-mail?". Logo, nesse exemplo e em similares (onde não estamos trabalhando diretamente com o próprio header ou main, qual a diferença prática e o que impacta estruturalmente o uso do padding ao invez do margin e vice-versa?

Sei que o margin cria um espaço entre um elemento e outro e, o padding, cria um preenchimento interno entre o elemento e a borda (quando não utilizado o box-sizing). Dessa forma, visualmente falando, no exemplo acima, o padding trás praticamente o mesmo resultado que o margin. Logo, podemos optar por qualquer um deles, ou, estruturalmente falando, há diferença?

1 resposta

Olá, Fernando.

Tudo bem?

O padding cria um espaçamento interno, já o margin cria um espaçamento externo, nesse caso é melhor utilizar o margin pois queremos separar dois elementos com um espaçamento externo, o padding funciona ai porque é só um checkbox dentro de uma label e como não tem a cor de fundo(background) ele cria um espaçamento interno invisivel como se fosse uma margin mesmo, agora se tivesse uma cor de fundo na label, o padding ia aumentar o tamanho dessa cor e mudar vizualmente.

Mas você vai perceber praticando que cada um tem o seu momento, mas básicamente é isso mesmo, a margin para afastar elementos um dos outros e o padding ele cria um espaçamento interno.

Faz o teste ai, põe um background na label <label class="checkbox"> e testa com o padding e depois com o margin.

Espero ter ajudado.

Valeu Fernando.