Html 为什么显示：内联块；是否从子元素中删除下划线？

最近我回答了一个问题，OP想要

文本装饰：下划线

用于包装在

a

元素中的整个文本，而不是包装在

span

中的文本，因此是这样的

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

不删除包装在

span

元素中的文本的下划线

但这确实消除了下划线

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

所以我把

span

做成了一个

inline块

，它工作了，我通常就是这样做的。但当谈到解释时，我无法解释为什么这样做实际上会删除下划线，而只需使用

文本装饰：无没有

在某些情况下，文本装饰从元素传播到某些子体。描述了发生和未发生这种情况的所有情况（以及行为明确未定义的情况）。在这里，以下部分是相关的：

请注意，文本装饰不会传播到浮动和绝对定位的子体，也不会传播到原子内联级子体（如内联块和内联表）的内容

请注意，这种传播与继承不同，完全是一个单独的概念；实际上，
text-decoration:none
和
text-decoration:inherit
不会以您期望的方式影响传播：


文本装饰：none
仅表示“此元素本身没有文本装饰”，并且
文本装饰：继承
表示“此元素具有与其父元素相同的指定的
文本装饰
值。”

在这两种情况下，父文本装饰仍将传播到元素（如果适用）。您可以使用
继承
，强制内联块具有与其父块相同的文本装饰，但不能强制父块通过从其自身祖先传播获得的任何其他装饰

这也意味着只要拥有
display:inline block
就足以防止文本装饰被传播。您无需再次指定
文本装饰：无
——它已经是初始值。
因此即使使用
显示：块不会删除下划线，对吗？谢谢，我的印象是，将其设置为块级别可以删除下划线，但当我使用
display:block在我感到困惑的地方它没有被删除。。
span {
   text-decoration: none;
   display: inline-block;
}