How to remove the bottom 1px of an inline-block (CSS)? - html

Question

I will refer to this screenshot in my explanation:
I have set up tabs like you see in the picture. I wanted the active tab (home in the picture) to have a 1px black line under it, so I used bottom-border. However, it's difficult to see but the pink-ish background extends for that entire row. I would like the pink to stop drawing at the bottom of a tab, excluding a border if there is one (so just 1px above the bottom).
.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;
}
Above is my CSS for main_tabs (which is responsible for that pink background) and the active tab. In main_tabs, I have tried playing around with background-size but it didn't change anything. I tried to fiddle with width and display, but it messed up my tabs entirely.

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

Your border is added in original height of <li> that why it appears like this.
Use css property box-sizing:border-box to merge it in original height.
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;
}