为什么显示：inline-block;从子元素中删除下划线？ [英] Why does display: inline-block; remove an underline from a child element?

问题描述

最近，我回答了一个问题，OP要求 text-decoration：underline; 包含在 a 元素，但不是包含在 span 中的元素，所以它是这样的



 < a href =＃>< span>非下划线< / span>应加下划线< / a> 
  

所以简单地给出

  span {
 text-decoration：none; 
 
  

不会删除包含在<$ c $内的文本的下划线c> span 元素

但是这不会删除下划线

  span {
 text-decoration：none; 
 display：inline-block; 
 
 $ / code> 

所以我做了 span an inline-block ，它工作，这就是我通常的做法。但是当解释时，我无法解释为什么这样做只是使用 text-decoration：none; 不会实际删除下划线。

演示

解决方案

在某些情况下，文本装饰从元素传播到某些后代。 规范描述了发生这种情况的所有情况并且不会发生（以及行为显式未定义的情况）。在这里，以下部分是相关的：

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

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

• text-decoration：none 简单的意思是这个元素没有自己的文本装饰，和


• text-decoration：inherit 表示该元素具有相同的指定







在这两种情况下，父文本装饰将仍然是传播到适用的元素。你可以使用继承，但不是家长通过传播获得的任何其他装饰，强制内联块具有与其父项相同的文本装饰从它自己的祖先开始。

这也意味着只需 display：inline-block 就足以防止文本装饰被传播。您不需要再次指定 text-decoration：none - 它已经是初始值。

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

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

So simply giving

span {
   text-decoration: none;
}

doesn't remove the underline for the text wrapped inside a span element

But this does remove the underline

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

So I made the span an inline-block and it worked, which is how I usually do it. But when it came to explanation I was not able to explain why doing this actually removes the underline where simply using text-decoration: none; doesn't.

Demo

解决方案

Text decorations are propagated from an element to certain descendants in certain cases. The spec describes all the cases in which this happens and doesn't happen (as well as cases where the behavior is explicitly undefined). Here, the following portion is relevant:

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

Note that this propagation is not the same as inheritance and is a separate concept entirely; indeed, text-decoration: none and text-decoration: inherit do not affect propagation in the way you'd expect them to:

• text-decoration: none simply means "this element has no text decorations of its own", and
• text-decoration: inherit means "this element has the same specified text-decoration value as its parent."

In both situations, parent text decorations will still be propagated to the element where applicable. You can force an inline-block to have the same text decoration as its parent using inherit, but not any other decorations that the parent gains through propagation from its own ancestors.

This also means that simply having display: inline-block is enough to prevent the text decorations from being propagated. You do not need to specify text-decoration: none again — it's already the initial value.

这篇关于为什么显示：inline-block;从子元素中删除下划线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！