html - CSS - 子元素的边框覆盖父元素

Question

我有以下代码片段:

h2 { padding: 0; margin: 0; }
.middle-bar { background-color: #b0b0b0; border-bottom: 2px solid black; }
.middle-bar h2 { border-bottom: 1px solid white; border-right: 1px solid white; display: inline-block }
.above-main { display: inline-flex; }

<div class="middle-bar">
  <h2>TEST</h2>
  <div class="above-main">
    <span>test test 123</span>
  </div>
</div>

我正在尝试获取它，以便父级( middle-bar )底部边框不会在 <h2> 下通过元素(以便对该部分使用 <h2> border-bottom)。

如果我设置 border-bottom: 2px solid black;至 above-main类，它只强调测试测试 123。如果我设置 above-main至 display: block; (或 display: flex; )，它就像一个 block元素应该在 <h2> 下方创建一个新行.

有谁知道如何获得 border-bottom: 1px solid white;来自子元素 <h2> “覆盖” border-bottom: 2px solid black;来自 parent .middle-bar元素？

谢谢。

Answer 1

在上面的主 div 而不是外部 div 上设置边框底部。

编辑:正如您已经尝试过的那样:h2 上的 margin-bottom: -1px 能解决吗？