Inspetor de espaçamento CSS: veja e copie o box model
Um inspetor de espaçamento CSS que mostra o box model de um elemento, o padding e a margin de cada lado, o gap, o border radius e o display, e copia cada valor com um clique.
Atualizado em
Ag
- Ink
- Amber
- Paper
Um layout parece errado e a correção começa por um único elemento. O padding dentro de um botão está apertado demais, ou a margem ao redor de um card está larga demais, e você quer o número sem vasculhar o DevTools. Um inspetor de espaçamento CSS evita essa busca. Você aponta para o elemento e a seção Box mostra o box model com todos os lados, valor por valor. O SuperchargeInspect lê esse elemento para você.
O que o inspetor de box model CSS mostra
A seção Box desenha o box model do elemento em camadas, da mais externa para a mais interna: margin, depois border, depois padding, depois content. Cada lado do elemento tem seu próprio valor, então os lados superior, direito, inferior e esquerdo são lidos separadamente.
O centro mostra a caixa de conteúdo como largura por altura em pixels CSS, o espaço onde ficam o texto e os filhos do elemento. O painel mostra o tamanho do conteúdo em números inteiros.
Ao lado do diagrama, a seção lista mais três valores à parte: Gap, Radius e Display. Radius é o valor de border-radius. Cada um aparece à parte e é copiado individualmente quando você clica nele.
Como ler o box model de um elemento
Cada linha abaixo identifica uma parte do box model do elemento e o que ajustar quando o espaçamento parece errado.
| Valor | O que indica |
|---|---|
margin | O espaço fora da borda, em cada lado |
border | A linha ao redor do padding, com sua largura em cada lado |
padding | O espaço entre a borda e o conteúdo, em cada lado |
| Conteúdo | A largura por altura do conteúdo, em px CSS |
gap | O espaço entre os filhos do elemento |
| Radius | O arredondamento dos cantos, de border-radius |
display | O modo de layout, como block, flex ou grid |
Leia de fora para dentro, na mesma ordem em que o diagrama os desenha.
Como copiar valores de espaçamento
Cada valor na seção Box é um botão. Clique no padding superior e só esse valor é copiado. Clique em gap e apenas o gap é copiado. Você copia um valor por vez, então cola só o que está mudando.
Para copiar o conjunto inteiro, abra o menu More ways to copy e escolha Copy text only. Ele inclui a lista completa de estilos observados, com valores em px para o padding e a margem na ordem superior, direita, inferior, esquerda, seguidos de gap, border-radius e display.
O que ele não mede
Ele lê um elemento por vez, e apenas um. Não há régua, guia, sobreposição de grid ou flex, nem medição da distância entre dois elementos. Para comparar dois elementos, trave o primeiro, anote o padding e a margem dele, depois vá para o outro com as setas do teclado e leia os valores.
Atalhos de teclado e privacidade
Comece com Alt+Shift+E e depois navegue entre os elementos com as setas do teclado. Pressione Ctrl+Up e Ctrl+Down para ir ao elemento pai ou ao filho, ou Option+Up e Option+Down no macOS. Subir para o pai mostra qual contêiner adiciona o espaço. Pressione Enter para travar o elemento e Esc para voltar à seleção ou fechar o painel.
Tudo roda localmente. Não há chamadas de rede nem conta, então nada do que você inspeciona é enviado para lugar nenhum.
Veja também fontes e cores com o recurso de inspecionar elemento CSS.
Perguntas frequentes
Como inspecionar o padding e a margem de um elemento?
O que o diagrama do box model mostra?
Os valores são mostrados em pixels?
Dá para medir a distância entre dois elementos?
Ele envia dados da página para algum lugar?
Recursos relacionados
Mostre à sua ferramenta de programação com IA o elemento exato a ser alterado
Aponte para o elemento, adicione uma nota e copie uma referência com um print anotado e os estilos observados. Depois cole na ferramenta de programação com IA que você usa hoje.
Inspecionar elemento CSS: veja e copie os valores CSS de qualquer elemento
Um inspetor de CSS que permite ver o CSS de qualquer elemento em um site. Veja a fonte, as cores, o espaçamento e o box model, e copie os valores de CSS para a área de transferência.
Ver cor de um elemento: encontre o código hex de qualquer elemento de um site
Veja as cores de um site em qualquer página aberta. Aponte para o elemento e a seção Colors mostra as cores do texto, do fundo e da borda. Um clique copia o código hex.