Solucionado
.icones-sociais a{
background-image: url("github.png");
display: inline;
width: 40px;
height: 40px;
text-indent: -9999px
}Olá, porque a propriedade text-indent , funciona apenas com display: block / inline-block ?
Porque com display: inline; não funciona?
Oi Nicolas, tudo certo?
Essa width/height que voce colocou, reparou que ela nao pega? Justamente pois o elemento é inline. (tanto que não é necessário colocar inline em um <a> pois ele já é assim por padrão).
Se não tem uma width definida, o text-indent não consegue agir.
Fiz esse Jsbin aqui para voce ver:
http://jsbin.com/koyubedeyi/edit?html,css,output
Espero ter ajudado e bons estudos,
Abcs!
Se não tem uma width definida, o text-indent não consegue agir.
Natan de Souza Fonseca
É exatamente nesse ponto que eu queria chegar, eu imaginei isso também, porém não gosto muito de "imaginar" prefiro ter certeza.
busquei essa informação na documentação do w3school text-indent E display:inline; e infelizmente não consegui achar algo relacionado a esse motivo.
Não estou duvidando da sua resposta, longe disso. Só queria saber se, situações assim, só conseguimos aprender na prática(deduzindo)? ou existe alguma documentação dizendo que sem uma width definida, o text-indent não consegue agir.
@Att
Debugando essa questão no navegador.. achei talvez possíveis causas disso, gostaria que me falasse se estou correto ou não sobre essa teoria.
tag span default inline.
tag p default block.
A tag span, tem width por padrão auto como vemos no box-model.
Já a tag p, mesmo se eu definir width auto para ela, seu box-model terá o valor relativo ao tamanho de sua "tag pai" digamos assim.
Resumindo, o navegador não interpreta um display:inline como um width de valor X, apenas coloca seu valor como auto. Sera esse o motivo pelo qual o text-indent não consegue fazer o seu calculo de pixels?
Oi Nicolas,
Resumindo, o navegador não interpreta um display:inline como um width de valor X, apenas coloca seu valor como auto. Sera esse o motivo pelo qual o text-indent não consegue fazer o seu calculo de pixels?Exatamente! Ele não tem como indentar se não tem largura. Elementos inline não conseguimos setar width.
O <p> é bloco, sim, e além de você conseguir setar width, ele ocupa a linha inteira, já um <span> ou <a> não. Voce pode ler mais a respeito dos tipos de elementos aqui: https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model
Se voce precisa usar o text-indent em um elemento inline, e nao pode alterar seu display, recomendo essa solucao usando um pseudo-elemento: http://www.cssmojo.com/text-indent_and_inline-elements/
Tambem nao encontrei nenhuma documentação sobre esse caso dos dois, text-indent e elementos inline. Mas muita coisa que acabamos sabendo que funciona e não funciona vai dos nossos testes mesmo.
Abcs!
Muito obrigado pela explicação ^^.
Abraço.