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; от родительского .middle-bar элемента?

спасибо.

Answer 1

Установите нижний край на главном div вместо внешнего div.

Редактировать: как вы уже пробовали: margin-bottom: -1px на h2 решить?

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>