deferença entre inline, block, inline-block

-------------------------------------------------------------------------------------------------------

display: block: qualquer tag que tenha essa propriedade ocupará uma linha inteira dentro da sua tag pai.

Tag pai: é a primeira tag externa. É a tag que engloba a tag atual. Ex:

<div>
    <a>a1</a>
    <a>a2</a>

    <footer>f1</footer>
</div>

Ambas as tags <a> e <footer> tem como tag pai a <div>.

Então, ao colocar a propriedade display: block nas tags <a>, cada uma ocupará uma linha inteira dentro da tag <div>. O resultado disso é que elas serão empilhadas como caixas ou blocos se preferir:

.

( Observe que a largura das tags <a> virou na verdade a largura das linhas da <div>. É isso que faz elas ocuparem uma linha inteira.)

-------------------------------------------------------------------------------------------------------

display: inline: Na maioria das vezes, qualquer tag que tenha essa propriedade não ocupará uma linha inteira da sua tag pai. Ou seja, essa tag se comportará como um elemento em linha. Utilizando o mesmo exemplo do display: block, agora vou colocar display: inline nas tags <a>:

.

( Observe que as tags <a> estão numa mesma linha. Além disso, o tamanho delas "diminuiu". Isso acontece porque quando elas eram blocks, a sua largura era 100%, ou seja, 100% da largura da linha da tag pai. Agora que elas são inline, sua largura é praticamente a largura do texto dentro delas, que é a largura real dessa tag.)

-------------------------------------------------------------------------------------------------------

display: inline-block: essa propriedade fará com que a tag se comporte como um bloco em linha. A diferença em relação à propriedade display: inline é que os blocos podem ter suas alturas reajustadas!!! Utilizando o mesmo exemplo do display: inline, agora vou colocar display: inline-block e vou aumentar a altura das tags <a>:

.

( É possível perceber também que com o display: inline-block as tags <a> se encaixaram corretamente na altura da primeira linha da <div> )

-------------------------------------------------------------------------------------------------------

Qualquer dúvida que tiver me avise por favor.