为什么显示：inline-block; 从子元素中删除下划线？

小编典典

css

最近，我回答了一个问题，OP希望text-decoration: underline;将整个文本包装在a元素中，而不是包装在其中的文本span，所以就像这样

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

所以简单地给

span {
   text-decoration: none;
}

不会删除包裹在span元素内的文本的下划线

但这确实消除了下划线

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

因此，我制作了spanan inline-block并成功了，这就是我通常的做法。但是，当涉及到解释时，我无法解释为什么这样做实际上会删除下划线，而仅仅使用了下划线text-decoration: none;。

阅读 424

2020-05-16

共1个答案

小编典典

在某些情况下，文本修饰从元素传播到某些后代。该规范描述了所有在此发生，不会发生（以及情况的行为被明确未定义）的情况下。在此，以下部分是相关的：

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

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

在两种情况下，父文本修饰仍将在适用时传播到元素。您可以使用强制内联块对其父代进行相同的文本修饰inherit，但不能
强制父代通过从其祖先传播而获得的其他修饰。

这也意味着简单地拥有display: inline-block足以防止文本装饰传播。您无需text-decoration: none再次指定-
它已经是初始值。

2020-05-16