White space between table cells - html

Question

I have a list with multiple links in it. I want them to display next to each other with a coloured background and some white space between them.
First I had "display:inline-block;" but then I couldn't give the link a vertical align. So I found out that I had to make the display a table-cell but now I don't have white space because I have a coloured background.
I have used padding but this didn't gave me white space. This is my code with fiddle:
HTML:
<div id="frontpage-menu">
<ul class="button">
<li>Info</li>
<li>Diensten</li>
<li>Projecten</li>
<li>Contact</li>
</ul>
</div>
CSS:
#frontpage-menu {
width: 1000px;
display: block;
height: 50px;
}
.button li {
display: table-cell;
background-color: #4A4A2F;
width: 200px;
height: 65px;
text-align: center;
vertical-align: middle;
}
.button li>a {
text-decoration: none;
font-size: 40pt;
color: #FFFFFF;
letter-spacing: -4px;
}
This is my fiddle: http://jsfiddle.net/0L7275dq/

Answer 1

You can add border: 3px solid; border-color: white in your css for li.
You can check this fiddle link for the demo: Fiddle

Answer 2

add the style
border-collapse:collapse to your cells and table, that SHOULD fix it

Answer 3

Use:
 
and for larger spaces:
 
Add the tag at the end of your text and you will get space after your text.
you can find a full list of these codes here HTML Codes

Answer 4

#frontpage-menu {
width: auto;
display: block;
height: auto;
}
.button ul {
height: 65px;
background-color: red;
width: 200px;
display: inline;
}
.button li {
/*display: table-cell;*/
background-color: #4A4A2F;
width: 200px;
height: 65px;
text-align: center;
vertical-align: middle;
padding-left: 10px; /*this is where you should mess around with your white space.*/
}
.button li>a {
text-decoration: none;
font-size: 40pt;
color: #FFFFFF;
letter-spacing: -4px;
}