White space between table cells

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><a href="#">Info</a></li>
        <li><a href="#">Diensten</a></li>
        <li><a href="#">Projecten</a></li>
        <li><a href="#">Contact</a></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/

---

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

---

add the style

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

---

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

链接地址: http://www.djcxy.com/p/94742.html

上一篇: 定位在CCS中的灯箱图像浏览器

下一篇: 表格单元之间的空白区域