bons pontos já feitos aqui, mas embora haja muitas informações sobre como a renderização de margens é realizada pelo navegador, o porquê ainda não foi respondido:
"Por que margin-top: -8px não é o mesmo que margin-bottom: 8px?"
o que também podemos perguntar é:
Por que uma margem inferior positiva não 'empurra' os elementos anteriores, enquanto uma margem superior positiva 'desce' os elementos seguintes?
então o que vemos é que há uma diferença na renderização das margens dependendo do lado em que são aplicadas - as margens superior (e esquerda) são diferentes das inferiores (e direita).
as coisas estão se tornando mais claras quando temos uma visão (simplificada) de como os estilos são aplicados pelo navegador: os elementos são renderizados de cima para baixo na janela de visualização, começando no canto superior esquerdo (vamos ficar com a renderização vertical por enquanto, tendo em mente que o horizontal é tratado da mesma forma).
considere o seguinte html:
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
analogamente à sua posição no código, essas três caixas aparecem empilhadas 'de cima para baixo' no navegador ( mantendo as coisas simples, não consideraremos aqui a order
propriedade do módulo css3 'flex-box' ). portanto, sempre que os estilos são aplicados à caixa 3, as posições dos elementos precedentes (para as caixas 1 e 2) já foram determinadas e não devem mais ser alteradas por causa da velocidade de renderização.
agora, imagine uma margem superior de -10px para a caixa 3. em vez de deslocar todos os elementos anteriores para reunir algum espaço, o navegador apenas empurrará a caixa 3 para cima, então ela é renderizada em cima (ou embaixo, dependendo do Z-index ) quaisquer elementos anteriores. mesmo que o desempenho não fosse um problema, mover todos os elementos para cima poderia significar deslocá-los para fora da janela de visualização, portanto, a posição de rolagem atual teria que ser alterada para ter tudo visível novamente.
o mesmo se aplica a uma margem inferior para a caixa 3, tanto negativa quanto positiva: em vez de influenciar os elementos já avaliados, apenas um novo 'ponto de partida' para os próximos elementos é determinado. assim, definir uma margem inferior positiva empurrará os seguintes elementos para baixo; um negativo irá empurrá-los para cima.
onset
eoffset
. É verdade que muitas pessoas sempre usam a palavraoffset
( negativo ) quando querem dizeronset
( positivo ). Esta mensagem se autodestruirá se você atualizar sua resposta. Felicidades!