Move border-bottom further away from text - html

Question

I'm trying to move the border-bottom down so more of my active-link can be seen.
.navigation a.active-link {
background-border: #red;
border-style: solid;
border-bottom: solid white;
color: black;
padding:10px;
}
#navigation {
border-bottom: 1px solid currentColor;
text-decoration: none;
word-wrap: break-word;
padding-top: 10px;
margin-bottom: 15px;
overflow: hidden !important;
white-space: no-wrap;
text-overflow: clip;
height: 26px;
}
The problem is when I try and increase the padding-bottom it stacks my text and I'm trying to avoid that.
https://jsfiddle.net/akn5r7y5/2/

Answer 1

You can add the padding-bottom you need and set the anchor line-height accordingly so they don't stack
#navigation a {
line-height:26px;
}
#navigation {
padding-bottom:26px;
}
https://jsfiddle.net/akn5r7y5/3/

Answer 2

Adding padding-bottom to your navigation should fix your problem.
Read more about box model (paddings, margins etc.) here - https://css-tricks.com/box-sizing/

Answer 3

Remove your padding-top, and use line-height, must be equal to the height of the content, so it will be centered:
Your #navigation must look like this then:
#navigation {
border-bottom: 1px solid currentColor;
text-decoration: none;
word-wrap: break-word;
margin-bottom: 15px;
overflow: hidden !important;
white-space: no-wrap;
text-overflow: clip;
height: 26px;
line-height: 26px;
}

Answer 4

I think you're making this way harder than you need. Try to prevent using a fixed height. Also use a display: inline-block; on the anchor. This way it has a height you can actually work with. Example:
#navigation {
border-bottom: 1px solid currentColor;
}
.navigation a {
color: black;
padding: 10px;
display: inline-block;
text-decoration: none;
}
.navigation a.active-link {
background: red;
border: 1px solid black;
border-bottom: none;
}
<div class="navigation" id="navigation">
Show all
<a href="#" >title</a>
<a href="#" >title1</a>
<a href="#" >title2</a>
<a href="#" >title3</a>
<a href="#" >title4</a>
</div>

Answer 5

here is some clue for you.
ok forget what i just said about hr tags.
i just got what is your question, so you wanted to create a navigation with a border bottom, and a full border if you are in that page.. i suggest you to using ul li tags. its a bit comfotable, and dont use too many link if you dont have any responsive yet.
because, the whitegaps u think it's a easy task but it actually a big trouble in here. this <a></a> link should not seperated and you should type the code like this ridiculously like this
<a>link</a><a>link</a>
which mean, you should type it without a gaps in it, if only you put it in li tags, it would be easier to read like this
<li><a>link</a></li><li>
<a>link</a></li><li>
etc
so you only thinking about border inside of a, dont over think about a border in navigation div.
this is the code, have a look
.navigation a.active-link {
border: solid 1px black;
color: black;
padding:10px;
}
.navigation a{
padding:10px;
border-bottom: 1px solid black;
}
#navigation {
text-decoration: none;
padding-top: 10px;
padding-bottom:10px
}
hr{
border:solid black 1px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-lg-10 col-lg-offset-1">
<div class="navigation" id="navigation">
Show all<a href="#" >title</a><a href="#" >title1</a><a href="#" >title2</a><a href="#" >title3</a><a href="#" >title4</a><a href="#" >title5</a>
</div>
</div>