NB: Esta resposta não tem evidências sólidas, é baseada em minhas observações ao longo do tempo.
As propriedades calculadas em cinza não são padrão nem herdadas. Isso ocorre apenas em propriedades que não foram definidas para o elemento, mas calculadas a partir de seus filhos ou pai com base na renderização do layout do tempo de execução.
Veja esta página simples como exemplo, displayé padrão e font-sizeé herdada:
<style>
div { font-size: 13px; }
</style>
<div>
<p>asdf</p>
</div>
Neste exemplo específico, heighté calculado a partir <p>do nó filho - texto (tamanho da fonte mais altura da linha), widthé calculado a partir da <div>largura de seu pai , que também é calculada a partir de seu pai <body>.
EDIT: Bem, eu pensei de novo, aqui está minha resposta baseada em opinião . Eu realmente deveria dar uma olhada no código-fonte do Chromium mais tarde: D
Ao expandir essas setas, você pode ver qual regra real é aplicada ao elemento, entre todas aquelas definidas contra ele (diretamente ou herdadas, pelo desenvolvedor ou navegador):
Aqui você pode rastrear cada definição, mesmo incluindo as regras integradas do navegador, e verificar com o mecanismo CSS em cascata (substituição).
Portanto, para aqueles elementos que não têm definição CSS (nenhum definido diretamente, nenhum herdado, nenhum navegador embutido), você não tem nenhuma fonte para rastrear. E os valores das propriedades são totalmente calculados em tempo de execução.
Se você marcar Mostrar tudo , mais propriedades acinzentadas serão mostradas. Eles também não estão definidos em lugar nenhum. Mas, ao contrário das capturas de tela anteriores, eles não são calculados em tempo de execução - são os valores padrão das especificações CSS.
