Dúvida no Ex. 3 da Aula 9 - Nem tudo é o que parece

Opa,

Gostaria de saber pq tive que declarar o "display: inline-block;" em ".icones-redes-sociais li " e depois novamente em ".icones-redes-sociais a". Nesse caso minha âncora não herdaria o display inline-block do li?

Declarei "inherit" na âncora e tinha dado no mesmo. Como funciona nesse caso?

CSS

/ ÍCONES DAS REDES SOCIAIS /

.icones-redes-sociais li { display: inline-block; }

.icones-redes-sociais a { width:40px; height: 40px; display:inline-block; text-indent:-999999px; }

.icones-redes-sociais .github { background-image:url(../img/icons/github.png); }

.icones-redes-sociais .twitter { background-image:url(../img/icons/twitter.png); }

.icones-redes-sociais .linkedin { background-image:url(../img/icons/linkedin.png); }

HTML

Bruno, o seletor icones-redes-sociais li recebe o atributo display: inline-block; para que cada item da lista (neste caso nossos ícones) estejam na mesma linha e ao mesmo tempo tenham um comportamento de bloco, podendo ter sua propriedade height alterada por exemplo.

Já em icones-redes-sociais a é necessário que o elemento seja considerado como inline-block para que o texto seja identado (textos não podem ser identados se o display for inline) e a height também seja alterada .

Bom, neste nosso exercício é possível sim utilizar a propriedade inherit como você mencionou, esta fará com que nossa tag a herde a mesma característica de display de seu pai, que no caso é li e este está com display: inline-block.

Se você não atribuísse display: block ou inherit para .icones-redes-sociais a este manteria o valor padrão que é inline, o texto não seria identado, e o tamanho não seria definido.

Para inserir seus códigos HTML e CSS utilize o botão { } inserir código