Add empty space between div's content and bottom border - html

Question

I am attempting to add a bottom border to a div for the purpose of a navigation bar. The effect I am trying to achieve:
Currently, I have the following code:
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.container .item a.current {
border-bottom: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<a class="current" href="#">Page 1</a>
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
<div class="item">
Page 4
</div>
<div class="item">
Page 5
</div>
<div class="item">
Page 6
</div>
</div>
I cannot find a way to add the empty space in between the content of the div and the bottom border without it being the same colour as the div background.

Answer 1

As it currently stands you can't do this. You can't add a gap between an element and its own border. You can, however, add the border to its parent element (the div.item element in this case), then add padding-bottom to that same element to separate it from the a element:
$("a").click(function() {
$(".current").removeClass("current");
$(this).parent().addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.container .item.current {
border-bottom: 2px solid red;
padding-bottom: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item current">
Page 1
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
<div class="item">
Page 4
</div>
<div class="item">
Page 5
</div>
<div class="item">
Page 6
</div>
</div>
Note that I've also modified your JavaScript to add this .current class to the li element and not the clicked a element.

Answer 2

demo
new css:
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
border-bottom: 8px solid red;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
border-bottom: 4px solid white;
}
.container .item a.current {
}

Answer 3

One more version using :after pseudo element. Unlike other answers this will put white border inside of element, not push the green further outside.
The interesting parts I added/changed:
.container .item a {
...
position: relative;
}
.container .item a.current:after {
content:'';
position: absolute;
left: 0;
bottom: 2px;
height: 2px;
width: 100%;
background-color: #FFF;
}
And here is a demo:
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
position: relative;
}
.container .item a.current {
border-bottom: 2px solid red;
}
.container .item a.current:after {
content:'';
position: absolute;
left: 0;
bottom: 2px;
height: 2px;
width: 100%;
background-color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<a class="current" href="#">Page 1</a>
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
</div>
Demo: http://jsfiddle.net/osajfgLc/

Answer 4

Not sure whether this is what you want. Try this. I added a div with class box. This also can be done using css after method.
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.box {
margin-top:2px;
height: 2px;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<a class="current" href="#">Page 1</a>
<div class="box"></div>
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
<div class="item">
Page 4
</div>
<div class="item">
Page 5
</div>
<div class="item">
Page 6
</div>
</div>