Estilos calculados e inspetor do modelo de caixa

Chrome DevTools → Elementos → a aba Calculados mostra o valor final calculado de cada propriedade CSS no elemento selecionado, após a resolução da cascata, da herança e da especificidade. Ele responde a "o que está realmente aplicado?", em vez de "o que foi escrito?"

O painel Calculados exibe um diagrama interativo do modelo de caixa, mostrando as dimensões do conteúdo, do preenchimento, da borda e da margem do elemento selecionado. Clique em qualquer dimensão para destacar a regra CSS que a definiu e ir para o painel Estilos.

Digite na caixa de filtro para encontrar rapidamente propriedades calculadas específicas. Marque "Mostrar todas" para incluir propriedades herdadas e padrão do navegador. Desmarque essa opção para mostrar apenas propriedades não padrão — o caminho mais curto até os estilos aplicados relevantes.

As propriedades exibidas em cinza no painel Calculados são herdadas de um elemento pai. Clique na propriedade herdada para ir até o elemento e a regra que a definiu, rastreando a cascata sem inspecionar manualmente o elemento pai na marcação.

Escrever margin: 16px 8px se expande para quatro valores calculados: margem superior, margem direita, margem inferior e margem esquerda. O painel Calculados sempre mostra as propriedades individuais em sua forma completa — algo útil para depurar problemas de espaçamento assimétrico.

Os valores de cor calculados estão sempre no formato rgb() ou rgba(), independentemente de como foram escritos. Clique em uma amostra de cor no painel Estilos para alternar o formato de exibição (hex, hsl, rgb). O painel Calculados sempre mostra a cor resolvida.

Inspecione o tamanho da fonte calculado, a família da fonte, a altura da linha e o espaçamento entre letras para verificar se os padrões tipográficos foram aplicados corretamente. As alternativas de fonte do navegador aparecem na família de fontes calculada quando uma fonte solicitada não consegue ser carregada.

box-sizing: border-box faz a largura incluir o preenchimento e a borda; box-sizing: content-box (o padrão) os exclui. O diagrama do modelo de caixa no DevTools reflete o modelo aplicado — compare a largura do conteúdo com a largura total para confirmar o comportamento de box-sizing.

As margens verticais entre elementos de bloco colapsam para o maior dos dois valores. O diagrama do modelo de caixa mostra a margem efetiva — use-o junto do Inspetor de layout para identificar margens colapsadas que diferem dos valores escritos.

O painel Estilos mostra todas as regras direcionadas ao elemento em ordem de especificidade. Regras tachadas foram substituídas. Para descobrir qual regra vence uma disputa por uma propriedade, procure a declaração superior que não esteja tachada no painel Estilos.

As regras da folha de estilos do agente do usuário do navegador aparecem na parte inferior do painel Estilos, com o rótulo "folha de estilos do agente do usuário". O painel Calculados mostra seus valores resolvidos. Redefina-os com uma redefinição de CSS ou com Normalize.css para estabelecer uma base consistente entre os navegadores.

O que o painel de estilos calculados mostra que o painel Estilos não mostra?

O painel de estilos calculados e o diagrama do modelo de caixa revelam os valores finais resolvidos de todas as propriedades CSS após a resolução da cascata. Use-os para rastrear a herança, depurar a expansão abreviada, investigar o dimensionamento da caixa e identificar qual regra vence os conflitos de especificidade em qualquer elemento.