Add empty space between div's content and bottom border

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:

Answer 1

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">
    <a href="#">Page 2</a>
  </div>
  
  <div class="item">
    <a href="#">Page 3</a>
  </div>
  
  <div class="item">
    <a href="#">Page 4</a>
  </div>
  
  <div class="item">
    <a href="#">Page 5</a>
  </div>
  
  <div class="item">
    <a href="#">Page 6</a>
  </div>
  
</div>

Answer 2

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">
    <a href="#">Page 1</a>
  </div>
  
  <div class="item">
    <a href="#">Page 2</a>
  </div>
  
  <div class="item">
    <a href="#">Page 3</a>
  </div>
  
  <div class="item">
    <a href="#">Page 4</a>
  </div>
  
  <div class="item">
    <a href="#">Page 5</a>
  </div>
  
  <div class="item">
    <a href="#">Page 6</a>
  </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 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">
    <a href="#">Page 2</a>
  </div>
  <div class="item">
    <a href="#">Page 3</a>
  </div>
</div>

Demo: http://jsfiddle.net/osajfgLc/

Answer 4

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