Sei que o block ocupa toda a linha, e o inline-block ocupa somente o conteúdo.
Porém se eu usar um elemento block e reduzir a width dele, ele se comporta exatamente como um elemento inline-block.
Então qual a diferença real entre eles?
Solucionado
Sei que o block ocupa toda a linha, e o inline-block ocupa somente o conteúdo.
Porém se eu usar um elemento block e reduzir a width dele, ele se comporta exatamente como um elemento inline-block.
Então qual a diferença real entre eles?
Fala, Victor! Beleza?
Na realidade, o block não ocupa toda a linha, já que ele pode ser menor que a width da linha. Mas ele reserva ela. Independentemente da largura, ele adiciona uma quebra de linha. Assim, o próximo elemento criado sempre aparecerá abaixo, e não ao lado.
Com o inline-block, a quebra de linha não é adicionada e os elementos criados podem aparecer à direita do elemento.
Bons estudos!
Victor,
display:block: não é possível colocar nenhum elemento em volta, porque ocupam toda a largura. Mas, aceitam redimensionamento de largura e altura.display: inline: permite colocar elementos em volta mas, não aceitam redimensionamento de largura e altura.display:inline-block: é possível "avizinhar" outros elementos e permitem redimensionamento de altura e largura.Então, visualmente, eles podem não surtir muito efeito. Na real, as diferenças estão conectadas ao que você consegue ou não fazer, em relação ao que você precisa entregar na tela e qual característica melhor atende o seu projeto.