Como comentado, esta é uma ferramenta de debug do Firefox que exibe espaços em branco entre elementos que possuem display: inline
por padrão, visto que espaços entre esses elementos são tratados pelos navegadores como espaçamento. Veja o exemplo abaixo:
<button>Botão A</button>
<button>Botão B</button>
Os botões, por padrão, são exibidos inline
, porém há uma quebra de linha (que é um whitespace) entre eles, então o inspetor do Firefox exibe este símbolo indicando a quebra de linha:
Isso auxilia você a fazer o debug de espaçamento de elementos inline
. Fica mais claro quando utilizado com imagens. Veja o exemplo abaixo onde há duas imagens definidas em linhas distintas. Ao renderizar, existirá um espaçamento entre as mesmas, mesmo não tendo esta definição no CSS.
<img src="http://lorempixel.com/100/100" />
<img src="http://lorempixel.com/100/100" />
Já, se definidas as imagens da mesma linha, o espeçamento deixa de existir. Geralmente fazemos da primeira forma, pois o código fica mais legível, mas como não definimos o CSS, não esperamos que exista tal espaçamento. Desta forma, o inspetor do Firefox nos auxilia a encontrar a fonte deste comportamento.
<img src="http://lorempixel.com/100/100" /><img src="http://lorempixel.com/100/100" />
Se você definir os botões na mesma linha, verá que o inspetor não exibe este caractere:
O espaçamento ainda existirá pois é o estilo padrão do botão.
o
ele exibe whitespace-only text node