CSS - 子要素から境界線は、親要素

Question

を上書きするI次のコードスニペットがあります

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にクラスを設定した場合

は、それだけ私がdisplay: block;（またはdisplay: flex;）にabove-mainを設定した場合の試験試験123を、それが想定されるblock要素のように機能を強調し、<h2>下に新しい行を作ります。

は、親.middle-bar要素からborder-bottom: 2px solid black;を「上書き」する子要素<h2>からborder-bottom: 1px solid white;を取得する方法を誰もが知っていますか？

ありがとうございます。

Answer 1

外側のdivではなく、上記のメインdivに境界ボトムを設定します。

編集：既に試したとおり： h2のmargin-bottom: -1pxはそれを解決しますか？

Answer 2

多分あなたはこれが欲しいですか？

h2 { padding: 0; margin: 0; } 
 
.middle-bar .above-main { 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>