Edit Spaces Between Elements - html

Question

I have a pill / tab navigation menu, and I need to connect the menu to the rest of the body and the underline of the divs in order to make the menu look nice.
I need to color the space between the black and yellow and connect the underlined divs
.tab {
display: inline-block;
text-align: center;
border-bottom: 1px solid white;
width: 75px;
}
.selected {
border: 1px solid white;
border-bottom: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: rgba(0,0,0,1);
}
.createScreen {
display: block;
background-color: yellow;
width: 985px;
height: 500px;
}
.personalContainer {
margin-left: 5px;
}
.personalContainer, .shippingContainer, .billingContainer, .cardContainer {
margin-top: 5px;
display: inline-block;
background-color: rgba(0,0,0,0.25);
height: 400px;
width: 240px;
}
<div class="billingNav">
<div id="#createTab" class="tab selected">Create</div>
<div id="#editTab" class="tab notSelected">Edit</div>
<div id="#deleteTab" class="tab notSelected">Delete</div>
</div>
<div class="createScreen show">
<div class="personalContainer">
</div>
<div class="shippingContainer">
</div>
<div class="billingContainer">
</div>
<div class="cardContainer">
</div>
</div>
<div class="editScreen">
</div>
<div class="deleteScreen">
</div>

Answer 1

If you meant to the small gap between your selected tab and the menu, you can't make its border-bottom: none;.
Instead, I suggest you just override the tab preferences, so the bottom-border of the selected tab is black:
.selected {
border: 1px solid white;
border-bottom: 1px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: rgba(0,0,0,1);
}

Answer 2

This might get you closer to the result you need , before replacing these codes pls remove .selected from css.
.billingNav {
padding: 5px;
background-color: #444;
}
.tab {
display: inline-block;
margin-bottom: 5px;
text-align: center;
width: 75px;
color: #fff;
}
.tab:hover {
border-bottom: 2px solid #fff;
}

Answer 3

To connect the tabs together (no gap between tabs) you can see this question. there are several methods like as remove the whitespace in the HTML between the inline-block elements (no new line between of prev item and of next item). You may also use negative letter-spacing for parent and reset it to normal on cild (tab) elements.
The small white gap below the menu items are produced by the .tab {... border-bottom: 1px solid white;} style you set for tabs but border-bottom: none; on selected tab. to remove that space simply remove the border-bottom from tab.
Here is a working sample:
.billingNav {letter-spacing: -1em;}
.tab {
display: inline-block;
text-align: center;
letter-spacing: normal;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 75px;
/*border-right: 1px solid white;
background-color: rgba(200,200,200,1);*/
}
.selected {
/*border: 1px solid white;*/
/*border-bottom: none;*/
background-color: rgba(0,0,0,1);
color: white;
}
.createScreen {
display: block;
background-color: yellow;
width: 985px;
height: 500px;
}
.personalContainer {
margin-left: 5px;
}
.personalContainer, .shippingContainer, .billingContainer, .cardContainer {
margin-top: 5px;
display: inline-block;
background-color: rgba(0,0,0,0.25);
height: 400px;
width: 240px;
}
<div class="billingNav">
<div id="#createTab" class="tab selected">Create</div>
<div id="#editTab" class="tab notSelected">Edit</div>
<div id="#deleteTab" class="tab notSelected">Delete</div>
</div>
<div class="createScreen show">
<div class="personalContainer">
</div>
<div class="shippingContainer">
</div>
<div class="billingContainer">
</div>
<div class="cardContainer">
</div>
</div>
<div class="editScreen">
</div>
<div class="deleteScreen">
</div>
Another appearance could be achieved by adding a background and small right border to (non-selected) tabs:
.billingNav {letter-spacing: -1em;}
.tab {
display: inline-block;
text-align: center;
letter-spacing: normal;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 75px;
border-right: 1px solid white;
background-color: rgba(200,200,200,1);
}
.selected {
/*border: 1px solid white;*/
/*border-bottom: none;*/
background-color: rgba(0,0,0,1);
color: white;
}
.createScreen {
display: block;
background-color: yellow;
width: 985px;
height: 500px;
}
.personalContainer {
margin-left: 5px;
}
.personalContainer, .shippingContainer, .billingContainer, .cardContainer {
margin-top: 5px;
display: inline-block;
background-color: rgba(0,0,0,0.25);
height: 400px;
width: 240px;
}
<div class="billingNav">
<div id="#createTab" class="tab selected">Create</div>
<div id="#editTab" class="tab notSelected">Edit</div>
<div id="#deleteTab" class="tab notSelected">Delete</div>
</div>
<div class="createScreen show">
<div class="personalContainer">
</div>
<div class="shippingContainer">
</div>
<div class="billingContainer">
</div>
<div class="cardContainer">
</div>
</div>
<div class="editScreen">
</div>
<div class="deleteScreen">
</div>

Answer 4

Getting rid of the whitespace in between the underlined elements connected their borders
<div id="#createTab" class="tab selected">Create</div><div
id="#editTab" class="tab notSelected">Edit</div><div id="#deleteTab"
class="tab notSelected">Delete</div>

Answer 5

I personally would adjust the vertical-align so that the tabs do not have a gap in-between the values they already have a parent div container so the css would be
.tabSelected {
vertical-align: -4px; // or however many you need so that there is no gap