内联元素的轮廓不可见

Question

我有一个锚标签。我已经给出了这个锚标记的轮廓。但除非锚标记有

display: flex

，否则此轮廓不可见。

在下面的示例中，有两个锚标记。第一个没有弹性容器，但第二个有。您可以看到第一个锚标记的轮廓不可见，但第二个锚标记的轮廓可见。

为什么会这样？

.link {
  outline: 2px solid #000;
}
.link.flex {
  display: flex;
}
.content {
  padding: 20px;
  border: 1px solid #ff2121;
}

<a class="link" href="">
    <div class="content">
    <h4>This doesnot have a flex container</h4>
    </div>
</a>
<a class="link flex" href="">
    <div class="content">
    <h4>This has a flex container</h4>
    </div>
</a>

Answer 1

轮廓不会显示在第一个

<a>

标签上，因为

<a>

标签默认是内联的，这意味着它们只占用与其内容一样多的空间。当您将较大的块元素（例如

<div>

）放入内联

<a>

内时，轮廓不会正确环绕它。在

display: flex

标签上设置

<a>

通过使其表现得像块元素来修复此问题，从而允许轮廓覆盖整个内容。