如何在按钮和它的边框之间添加空格？

Question

我所拥有的是一个包含行和列的表格，这是一个两行的图片，我有一个边框，继续不间断，我做了..每个td都有一个按钮，我想要做的是添加垂直和水平的空间，如箭头中的图像所示。我的意思是在每个按钮下方以及按钮的左右两侧而不影响边框，这是我试过的：

HTML代码：

<table>
<tr>
<td width="188px" class="button"><img src="b2.png" /></td>

<td width="188px" class="button" ></td>
<td width="188px" class="button" ></td>
<td width="188px" class="button" ></td>
<td width="188px" class="button" ><img src="b1.png" /></td>
<td width="188px" class="button" ></td>
</tr>  

Css代码：

.button {
    width:180px;
    text-align:center;
    background:rgb(51,153,51);
    position:relative;
    overflow:hidden;
    margin-top:3px;
      margin-bottom:3px;
        margin-left:1px;
        margin-right:12px;
     /* add this */
}
.button a{
    display:block;
    height:37px;
    color:white;
    line-height:100px;
    text-decoration:none;
    position:relative;
    z-index:10;
}
.button:before {
    content:" ";
    display:block;
    width:180px;
    height:37px;
    background:rgba(0,0,0,0.5);
    position:absolute;
    left:0;
    top:100%;
    transition:all 0.5s;
}
.button:hover:before {
    top:0;
}

table td {


    margin-top: 10px; 
    margin-bottom: 10px; 
    padding: 0px 0px 0px 0px;
    border-left:1.0px solid #000;
    border-right:1.0px solid #000;
    border-spacing:5px;
}
table {
    border-collapse: collapse;

}

有人可以帮我吗？

Answer 1

我已经修复了问题：

我改变了这个：

<td class="button"> 

对此：

<td><div class="button">

Answer 2

你可以在.button和.button中使用填充：在将高度增加20px之前。试试这个css ..或者参考这个link

.button {
    width:180px;
    text-align:center;
    background:rgb(51, 153, 51);
    position:relative;
    overflow:hidden;
    margin-top:3px;
    margin-bottom:3px;
    margin-left:1px;
    margin-right:12px;
    /* add this */
}
.button a {
    display:block;
    height:37px;
    color:white;
    line-height:100px;
    text-decoration:none;
    position:relative;
    z-index:10;
    padding:10px;
}
.button:before {
    content:" ";
    display:block;
    width:180px;
    height:57px;
    background:rgba(0, 0, 0, 0.5);
    position:absolute;
    left:0;
    top:100%;
    transition:all 0.5s;
}
.button:hover:before {
    top:0;
}
table td {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px 0px 0px 0px;
    border-left:1.0px solid #000;
    border-right:1.0px solid #000;
    border-spacing:5px;
}
table {
    border-collapse: collapse;
}