Dlaczego wyświetla: inline-block; usunąć podkreślenie z elementu potomnego?

Question

Niedawno odpowiedział na pytanie, a PO chciała text-decoration: underline; dla całego tekstu owinięty wewnątrz elementu a, ale nie jeden owinięty wewnątrz span, więc było coś takiego

<a href="#"><span>Not Underline</span>Should Be Underlined</a> 

Więc po prostu dając

span { 
    text-decoration: none; 
} 

nie usuwa podkreślenie dla tekstu owinięty wewnątrz span elementu

Ale ta usuwa niedociążenia ine

span { 
    text-decoration: none; 
    display: inline-block; 
} 

Więc zrobiłem spaninline-block i pracował, co jest jak zwykle zrobić. Ale gdy przychodziło do wyjaśnienia, nie byłem w stanie wyjaśnić, dlaczego to faktycznie usuwa podkreślenie, gdzie po prostu używanie text-decoration: none; nie.

Demo

Answer 1

dekoracje tekstowe są propagowane od elementu do niektórych potomków w niektórych przypadkach. spec opisuje wszystkie przypadki, w których tak się dzieje i nie ma miejsca (jak również przypadki, w których zachowanie jest jawnie niezdefiniowane). W tym przypadku odpowiednia jest następująca część:

Należy zauważyć, że dekoracje tekstowe nie są propagowane do pływających i absolutnie pozycjonowanych potomków, ani do zawartości atomowych potomnych na poziomie liniowym, takich jak wstawiane bloki i wbudowane tabele.

Należy zauważyć, że ta propagacja nie jest taka sama jak dziedziczenie i jest oddzielną koncepcją całkowicie; Rzeczywiście, text-decoration: none i text-decoration: inherit nie wpływają na propagację w sposób chcesz ich spodziewać:

• text-decoration: none oznacza po prostu „ten element nie posiada ozdób tekst jej własny”, a
• text-decoration: inherit oznacza „ten element ma ta sama określona wartość to text-decoration jako element nadrzędny. "

W obu sytuacjach dekoracje tekstu nadrzędnego będą nadal propagowane do elementu, jeśli dotyczy. Możesz zmusić blok wbudowany do tego samego dekorowania tekstu, co jego obiekt nadrzędny, używając innych dekoracji, które rodzic zyskuje poprzez propagację od swoich własnych przodków.

Oznacza to również, że po prostu posiadanie display: inline-block wystarczy, aby zapobiec propagacji tekstu. Nie musisz ponownie określać numeru text-decoration: none - jest to już wartość początkowa.