15 lines
1.2 KiB
Plaintext
15 lines
1.2 KiB
Plaintext
---
|
|
title: Qual é a diferença entre `inline` e `inline-block`?
|
|
---
|
|
|
|
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. |
|