Perché display: inline-block; rimuovere una sottolineatura da un elemento figlio?

Question

Recentemente ho risposto a una domanda e l'OP ha voluto text-decoration: underline; per l'intero testo avvolto all'interno dell'elemento a, ma non quello avvolto all'interno span, quindi è stato qualcosa di simile

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

Così semplicemente dando

span { 
    text-decoration: none; 
} 

non rimuove la sottolineatura per il testo avvolto all'interno di un elemento

span ma ciò rimuovere il sottocarico ine

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

così ho fatto il span un inline-block e ha funzionato, che è come di solito faccio. Ma quando si è trattato di spiegazioni, non sono stato in grado di spiegare il motivo per cui questo rimuove effettivamente la sottolineatura in cui semplicemente non è possibile utilizzare text-decoration: none;.

Demo

Answer 1

decorazioni di testo sono propagate da un elemento ad alcuni discendenti in determinati casi. Lo spec descrive tutti i casi in cui ciò accade e non si verifica (così come i casi in cui il comportamento è esplicitamente indefinito). Qui, la seguente porzione è rilevante:

notare che le decorazioni di testo non vengono propagate ai discendenti flottanti e posizionati in modo assoluto, né il contenuto di discendenti a livello atomico in linea come blocchi in linea e le tabelle in linea.

Si noti che questa propagazione non è la stessa dell'eredità ed è un concetto separato interamente; anzi, text-decoration: none e text-decoration: inherit non mi influenzano la propagazione nel modo che ci si aspetta che:

• text-decoration: none significa semplicemente "questo elemento non ha decorazioni di testo di un proprio", e
• text-decoration: inherit significa "questo elemento ha lo stesso valore specificato di text-decoration come genitore. "

In entrambe le situazioni, le decorazioni del testo principale verranno comunque propagate all'elemento, ove applicabile. Puoi forzare un blocco in linea per avere la stessa decorazione di testo del genitore usando inherit, ma non altre decorazioni che il genitore guadagna attraverso la propagazione dai propri antenati.

Ciò significa anche che è sufficiente disporre di display: inline-block per impedire la propagazione delle decorazioni di testo. Non è necessario specificare nuovamente text-decoration: none - è già il valore iniziale.