Why display: inline-block; remove underline from child?

Question

I recently answered a question, and OP wanted text-decoration: underline; for all the text enclosed inside the a element, but not from the one that was wrapped inside the span , so it was something like this

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

So just giving

 span { text-decoration: none; } 

does not remove underline for text enclosed inside span element

But it eliminates the underline

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

So, I did span an inline-block , and it worked, as I usually do. But when it came to the explanation, I could not explain why it really removes the underline, where to just use text-decoration: none; not.

Demo

Answer 1

In some cases, text decorations spread from an element to specific descendants. spec describes all cases when this happens and does not happen (as well as cases when the behavior is clearly undefined). The following part is important here:

Please note that text decorations do not apply to floating and absolutely positioned children, as well as to the contents of asynchronous child elements such as inline blocks and inline tables.

Please note that this distribution does not coincide with inheritance and is a separate concept in its entirety; indeed, text-decoration: none and text-decoration: inherit do not affect distribution as you would expect from them:

• text-decoration: none just means that "this element does not have its own text decorations" and
• text-decoration: inherit means that this element has the same text-decoration value as its parent element. "

In both situations, parent text decorations will still apply to the element, where applicable. You can force the inline block to have the same text decoration as its parent using inherit , but not any other decorations the parent receives through distribution from their own ancestors.

It also means that just having a display: inline-block enough to prevent the spread of text decorations. You do not need to specify text-decoration: none again - this is the initial value.