Edit Spaces Between Elements

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>

I don't see the question. You don't really say what the desired result should look like. — caramba, Dec 31 '17 at 06:49
your english is not clear! what you mean by "I need to color the space between the black and yellow"? do you want to remove the small white gap below the menu items? — S.Serpooshan, Dec 31 '17 at 07:07

score 0 · Answer 1 · answered Dec 31 '17 at 07:16

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);
}

score 0 · Answer 2 · answered Dec 31 '17 at 07:20

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;
}

score 0 · Answer 3 · answered Dec 31 '17 at 08:00

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>

score -1 · Answer 4 · answered Dec 31 '17 at 06:56

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>

score -1 · Answer 5 · answered Dec 31 '17 at 08:34

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

Edit Spaces Between Elements

5 Answers5