Inline-block CSS
A lição anterior mapeou os valores quotidianos de display. Aqui pratica o híbrido: inline-block. Quer vizinhos numa linha quando há espaço — como texto — e ainda uma caixa real que respeita width, height e padding. Esse é o trabalho.
Comparação lado a lado
📊 Inline vs inline-block vs block
| Modo | Comportamento de linha | Width / height / padding |
|---|---|---|
inline |
Senta-se na linha de texto | Width/height costumam ser ignorados; padding pode parecer estranho |
inline-block |
Fica na linha se sobrar espaço | Width, height e padding funcionam como caixa |
block |
Começa na própria linha | Modelo de caixa completo; muitas vezes preenche a largura da fila |
Escolha inline-block quando o elemento deve partilhar a fila com irmãos e ainda precisa de tamanho mensurável — chips, etiquetas, rótulos com ícone, botões compactos de barra. Deixe colunas de página inteira e alinhamento complexo para Flexbox e Grid depois.
Um chip com tamanho que ainda partilha a linha
Ao contrário do inline puro, um chip pode manter padding e largura fixa enquanto se senta ao lado de outros chips.
.chip {
display: inline-block;
width: 7rem;
padding: 0.4rem 0.75rem;
text-align: center;
border: 1px solid #c5c5c5;
border-radius: 999px;
background: #f7f7f7;
}
Uma barra de ferramentas simples
Vários controlos de igual largura podem sentar-se numa fila. Separe-os com margin. Basta para uma barra calma até chegar o Flexbox.
.tool {
display: inline-block;
width: 5.5rem;
padding: 0.5rem 0;
text-align: center;
margin-right: 0.35rem;
border: 1px solid #0b5fff;
border-radius: 0.35rem;
background: #e8f0ff;
}
Alinhamento vertical dentro da linha
Caixas de nível inline podem ter alturas diferentes junto a texto ou imagens. vertical-align desloca-as — middle é uma escolha calma comum para pares ícone+rótulo.
.icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
vertical-align: middle;
background: #0b5fff;
border-radius: 0.2rem;
}
.label {
display: inline-block;
vertical-align: middle;
margin-left: 0.4rem;
font-weight: 600;
}
A armadilha do espaço em branco
Os browsers tratam espaços e quebras de linha entre etiquetas como nós de texto. Entre dois irmãos inline-block, esse pequeno espaço torna-se um intervalo visível. Não é o gap do Flexbox — é whitespace HTML restante.
/* HTML como:
<span class="tile">A</span>
<span class="tile">B</span>
deixa um intervalo por causa da quebra de linha. */
.tile {
display: inline-block;
width: 3rem;
padding: 0.5rem 0;
text-align: center;
background: #fff3cd;
}
Para acalmar o intervalo: ponha as etiquetas numa linha sem espaço, comente a quebra, ou use com cuidado uma margem negativa pequena. Depois o Flexbox dá espaçamento mais limpo — não force cada fila com inline-block para sempre.
Um hábito calmo de inline-block
Use uma classe partilhada para itens de fila. Dimensione-os de propósito. Corrija o whitespace só quando o intervalo incomodar. Não reconstrua layouts de página inteiros com inline-blocks aninhados — assim regressa a dor da era float. Position e float têm as suas lições.
.row-item {
display: inline-block;
vertical-align: top;
width: 8rem;
padding: 0.75rem;
margin: 0 0.25rem 0.5rem 0;
border: 1px solid #ddd;
box-sizing: border-box;
}
Experimente você
- Construa três
.chipcominline-block, largura fixa e padding — veja-os partilhar uma linha. - Faça uma barra
.toolde quatro botões com larguras iguais emargin-right. - Coloque um
.iconpequeno ao lado de.labele testevertical-align: middle. - Ponha dois irmãos
.tileem linhas HTML separadas e depois numa só — compare o intervalo. - Escreva uma frase: quando basta inline-block e quando espera pelo Flexbox?
Erros comuns
- Esperar que o
inlinepuro honrewidth/heightcomo uma caixa real - Culpar o CSS por um «intervalo misterioso» que na verdade é whitespace HTML entre etiquetas
- Usar inline-block para inventar um layout de página completo multi-coluna
- Tratar esta lição como o levantamento amplo de
display(block / none) da anterior - Saltar aqui para receitas de
positionoufloatem vez de dominar o híbrido
Resumo
inline-blocksenta-se numa linha como texto mas mantém um modelo de caixa real para tamanho e padding- Ideal para chips, barras compactas e pares ícone+rótulo
vertical-alignajuda a alinhar vizinhos de alturas diferentes- O whitespace entre etiquetas pode criar um intervalo visível — conheça a causa
- Para filas complexas e intervalos limpos, o Flexbox vem depois; mantenha inline-block intencional
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo