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

  • Z时代
  • 2024-01-10
  • 分类：问答

最近，我回答了一个问题，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;。

回答：

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

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

请注意，这种传播与继承不同，完全是一个单独的概念。确实，text-decoration: none并且text-decoration:

inherit不会以您期望的方式影响传播：

  • text-decoration: none 只是表示“此元素本身没有文字修饰”，并且

  • text-decoration: inherit表示“此元素与text-decoration其父元素具有相同的指定值”。

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

强制父代通过从其祖先传播而获得的其他修饰。

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

它已经是初始值。

以上是 为什么显示：inline-block; 从子元素中删除下划线？ 的全部内容， 来源链接： utcz.com/qa/405680.html

回到顶部