Diferença entre margin e margin-bottom

Front-end
#1

Gostaria de saber se margin: 0 0 5px é a mesma coisa que margin-bottom: 5px

obrigado

#2

sim a mesma coisa, mesma função.

#3

Vlw

#4

Apenas para complementar:

A propriedade margin pode ser especificada usando um, dois, três ou quatro valores. Cada valor deve ser um <length>, uma <percentage>, ou a palavra-chave auto. Cada valor pode ser positivo, zero ou negativo.

  • Quando um valor é especificado, a mesma margem é aplicada para todos os quatro lados.
  • Quando dois valores são especificados, a primeira margem é aplicada aos lados superior e inferior, e a segunda aos lados esquerdo e direito.
  • Quando três valores são especificados, a primeira margem é apliacada ao topo, a segunda aos lados esquerdo e direito, e a terceira ao lado inferior.
  • Quando quatro valores são especificados, as margens são aplicadas aos lados superior, direito, inferior e esquerdo, nesta ordem (sentido horário).

FONTE: margin - CSS | MDN

1 curtida
#5

Nem sempre será a mesma coisa, pois depende muito de como estão os outros elementos da página.

margin: 0 0 5px muda a margem inferior para 5px, e as demais para zero. margin-bottom: 5px muda a margem inferior para 5px, mas as demais não são alteradas. Claro que dependendo do caso o resultado será o mesmo, mas caso as margens já tenham sido definidas (por um seletor mais abrangente, por exemplo), aí dará diferença.

Vamos usar esse HTML como exemplo:

<div id="main">
  <div id="first">1</div>
  <div id="second">2</div>
</div>

E este CSS inicial:

div {
    margin: 10px;
    display: flex;
}

div#main {
  background-color: blue;
  width: 100px;
  height: 50px;
}

div#first, div#second {
  width: 20px;
  height: 20px;
  background-color: yellow;
}

Ou seja, todas as div's possuem margem de 10px (todas as quatro margens), definida pelo primeiro seletor. Coloquei tamanhos e cores específicas em cada div para podermos visualizar melhor. O resultado será esse:

div1

Repare que as div's amarelas possuem margens de 10px (todas as quatro margens), por isso elas não “encostam” nos cantos da div azul.

Mas se eu adicionar isso aqui no final do CSS (ou seja, tem que ter todas as regras acima, mais essas):

div#first {
  margin-bottom: 5px;
}

div#second {
  margin: 0 0 5px;
}

Estas regras sobrescrevem a margem definida pelo primeiro seletor.

Agora ficará assim:

div1

A primeira div amarela só teve a borda inferior alterada para 5px (as demais continuam sendo 10px, que é o que foi definido pelo primeiro seletor), mas a segunda div amarela mudou a margem inferior para 5px e as outras foram zeradas, tanto que agora ela “encosta” no topo da div azul, além de ter ficado mais próxima da primeira div amarela.

1 curtida
#6

Amei o exemplo :clap:t3:

#7

Perfeitamente Hugo, concordo plenamente…