CSS border-bottom getting space between elements - html

Question

I am working on a sidebar, where I have 'a' elements inside 'li's, applying CSS code on them, and giving them border. However when I apply border-bottom on the 'a' elements, space between the elements is also effected. How can I remove this space between them? Thanks.
Sidebar image link: http://imgur.com/gntSanx
Code [html] :
<div id="container">
<div class="sidebar">
<ul id="nav">
<li><a href="#" class="selected">Dashboard</li>
<li><a href="#">Booter Hub</li>
<li><a href="#">Stresser</li>
<li><a href="#">Friends</li>
<li><a href="#">Search</li>
<li><a href="#">Purchase</li>
</ul>
</div>
<div class="content">
Code [CSS] :
ul#nav li a {
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0A0A0A;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s
}

Answer 1

You need to be a bit careful here. First, zero out the margin and padding for the parent ul element (which will also zero out the same for the li child elements).
You can then add the styling to the a elements as you need for your design.
#nav {
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
border: 1px dotted blue;
}
#nav li a {
display: block;
padding: 10px;
border-bottom: 1px solid red;
background-color: beige;
)
<ul id="nav">
<li>Dashboard</li>
<li>Booter Hub</li>
<li>Stresser</li>
<li>Friends</li>
<li>Search</li>
<li>Purchase</li>
</ul>

Answer 2

You request is unclear but it sounds as though you are suggesting that adding the border increases the height of the elements.
To have the borders/padding be included in the overall element dimensions you can use the box-sizing:border-box css property.
The box-sizing property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
Examples
box-sizing: content-box;
box-sizing: padding-box;
box-sizing: border-box;
box-sizing: inherit;
border-box
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note: Padding & border will be inside of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 350px;}
Box-sizing # MDN

Answer 3

First thing.. Close that a tag...
<li>Dashboard</li>
Once you have done that you will get the following result (I have removed the ul list-style, margin and padding, I am assuming you have done the same in other code not shared in the question)...
ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav li a {
border: 1px solid pink;
}
#nav li a {
text-decoration: none;
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0A0A0A;
}
<div id="container">
<div class="sidebar">
<ul id="nav">
<li>Dashboard</li>
<li>Booter Hub</li>
<li>Stresser</li>
<li>Friends</li>
<li>Search</li>
<li>Purchase</li>
</ul>
</div>
<div class="content">
*remember to add text-decoration: none; to remove the default a tag underline.