Qual é a diferença entre `inline` e `inline-block`?
Topics
CSS
Edit on GitHub
Vamos também comparar com display: block para completar.
| Propriedade | block | inline-block | inline |
|---|---|---|---|
| Tamanho | Preenche a largura do contêiner pai. | Depende do conteúdo. | Depende do conteúdo. |
| Posicionamento | Comece em uma nova linha e não tolera nenhum elemento HTML ao lado (exceto quando você adiciona float) | Flui juntamente com outros conteúdos e permite que outros elementos fiquem ao seu lado. | Flui juntamente com outros conteúdos e permite que outros elementos fiquem ao seu lado. |
| Pode especificar 'largura' e 'altura' | Sim | Sim | Não. Ignorará se já estiver definido. |
Pode ser alinhado com vertical-align | Não | Sim | Sim |
| Margem e Alinhamento | Todos os lados são respeitados. | Todos os lados são respeitados. | Apenas os lados horizontais respeitados. Os lados verticais, se especificados, não afetam o layout. O espaço vertical que ocupa depende do line-height, mesmo que o border e padding apareçam visualmente em torno do conteúdo. |
| Float | - | - | Torna-se como um elemento block onde você pode definir margens e preenchimentos verticais. |