Uma dica, e uma dúvida - margin-top aplicado a um elemento individual

[codercss 14]

Olá pessoal,

 

Quero deixar uma dica, caso não o local correcto peço desculpa e solicito que me direcionem.

Hoje deparei-me com um "erro" daqueles esquisitos, vamos lá...

 

Estava a testar umas coisas em CSS e ao fazer isto:

 

 

 
<style>
a {
margin-top: 20px;
}
</style>
 
<a href="http://forum.imasters.com.br" target="_blank">Isto vai a algum lado, eu prometo :)</a>

 

O elemento a não ficava afastado da margem superior! Ora bolas, pensei eu! O que estou a fazer de errado!?

Foi aí que me lembrei da propriedade display com o valor inline-block. Lá está nunca tinha exprimentado aplicar apenas assim as coisas!

 

Mas com isto, surgiu uma dúvida. Esta é a melhor maneira de afastar as coisas da margem? E porque que isto acontece? Pois já utilizei a propriedade margin e não tive que aplicar a propriedade display.

 

Resultado da coisa: https://jsfiddle.net/nvcyfLuv/1/

 

Obrigado, bons códigos e partilhe os seus conhecimentos! ;)

[L. Henrique 179]

Codercss,

Pra esse seu caso, existe uma "resposta" no site da W3C (Lembrando que isso é sobre o CSS2, mas não o display não tem diferença quando citamos CSS3):

• http://www.w3.org/TR/CSS2/visuren.html#inline-formatting
• http://www.w3.org/TR/CSS2/visuren.html#propdef-display

Os artigos estão em inglês, mas se quiser, tento achar uns em português. Quanto ao meu caso de uso, normalmente prefiro usar position + direções (top, left, right, bottom) para alinhar elementos.

 

Ao invés de utilizar:

.classe {
   display: inline-block;
   margin-top: -20px;
}

Tenho o costume de utilizar:

.classe {
   position: relative;
   top: -20px;
}

Boa sorte e bons estudos!