Как удалить нижний 1px встроенного блока (CSS)?

Question

я буду ссылаться на этот скриншот в своем объяснении:

Я настроил вкладки, как вы видите на картинке. Я хотел, чтобы у активной вкладки (дома на картинке) была 1px черная линия, поэтому я использовал нижнюю границу. Однако это трудно понять, но розовый фон распространяется на всю эту строку. Я хотел бы, чтобы розовый цвет прекратил рисовать в нижней части вкладки, исключая границу, если она есть (так что только 1px выше дна).

.main_tabs{ 
    width:100%; 
    display:inline-block; 
    background:#FFDEFD; 
} 

li.active a, li.active{ 
    background:#fff; 
    color:#4c4c4c; 
    border-radius: 3px 3px 0px 0px; 
    border-bottom-color:#000000; 
    border-bottom-width:1px; 
    border-bottom-style:solid; 
    transition:all linear 0.4s; 
} 

Выше мой CSS для main_tabs (который отвечает за этот розовый фон) и активной вкладки. В main_tabs я пробовал играть с размером фона, но ничего не изменил. Я пытался возиться с шириной и дисплеем, но это полностью перепутало мои вкладки.

Answer 1

.main_tabs { 
 
    background: #FFDEFD; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: .25em .5em 0; 
 
} 
 

 
.main_tabs li { 
 
    display: inline-block; 
 
} 
 

 
.main_tabs a { 
 
    display: block; 
 
    text-decoration: none; 
 
    line-height: 2em; 
 
    padding: 0 .5em; 
 
    background: #DDD; 
 
    border-radius: 3px 3px 0px 0px; 
 
    border-bottom: 1px solid transparent; 
 
    transition: all linear 0.4s; 
 
} 
 

 
.main_tabs .active a { 
 
    background: #fff; 
 
    color: #4c4c4c; 
 
    border-bottom-color: black; 
 
}

<ul class=main_tabs> 
 
    <li><a href=#>Non active</a></li> 
 
    <li class=active><a>Active</a></li> 
 
</ul>

Answer 2

Ваша граница добавлена ​​в исходную высоту <li>, почему она выглядит так.

Используйте свойство css box-sizing:border-box, чтобы объединить его в оригинальной высоте.

li.active a, li.active{ 
    background:#fff; 
    color:#4c4c4c; 
    box-sizing:border-box; 
    border-radius: 3px 3px 0px 0px; 
    border-bottom-color:#000000; 
    border-bottom-width:1px; 
    border-bottom-style:solid; 
    transition:all linear 0.4s; 
}