Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
"Margin é o epaçamento para todos os lados (topo, direita, baixo, esquerda) de uma vez, enquanto margin-bottom é específica para controlar apenas o espaçamento abaixo do elemento." Mas se o Margin é capaz de mudar o espaçamento em baixo somente, porque eu usaria o margin-bottom?
margin: 0px 0px 5px 0px;
margin-bottom: 5px;
Os dois é a mesma coisa, porque eu usaria os margin-top, margin-left, margin-right ao invés do margin.
Olá, estudante, como vai?
Essa é uma ótima pergunta. Na prática, as duas formas que você mostrou produzem o mesmo resultado. Tanto margin: 0px 0px 5px 0px; quanto margin-bottom: 5px; deixam apenas a margem inferior com 5px. A diferença está mais na clareza do código e na facilidade de manutenção do que no comportamento da página.
Quando você precisa alterar somente um lado, é comum utilizar margin-bottom, margin-top, margin-left ou margin-right, porque isso deixa explícita a intenção de quem escreveu o CSS. Imagine que outra pessoa abra o projeto meses depois. Ao encontrar margin-bottom: 5px;, ela entende imediatamente que apenas a margem inferior foi modificada. Já com margin: 0 0 5px 0;, é preciso interpretar a ordem dos quatro valores para chegar à mesma conclusão.
Outro cenário comum é quando o elemento já possui uma regra como margin: 20px;. Se você quiser alterar apenas a margem inferior em um breakpoint de responsividade, basta escrever margin-bottom: 5px;, sem precisar repetir os outros três valores. Isso torna o código mais enxuto e reduz a chance de modificar alguma margem sem querer.
Na sua opinião, em um projeto grande com centenas de arquivos CSS, qual das duas abordagens você acredita que deixaria o código mais fácil de ler e manter ao longo do tempo?
Conte com o fórum sempre que precisar.
Para saber mais:
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!