css，使行之间的距离

Question

我有一个CSS问题

这是我的HTML代码

<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td>
<img src="./images/hmm_binggung.png" height="70%"/><a class="pilih_size">Pilih Size</a>
</td>
</tr>
<tr>
<td id="list_size">
<span class="inactive" title="Out of Stock">36</span>
<span class="inactive" title="Out of Stock">37</span>
<span class="inactive" title="Out of Stock">38</span>
<span class="inactive" title="Out of Stock">39</span>
<span class="inactive" title="Out of Stock">40</span>
<span class="inactive" title="Out of Stock">41</span>
<a class="list_size" title="42">42</a>
<a class="list_size" title="43">43</s>
</td>
</tr>
<tr class="clear">
<td>
</td>
</tr>
<tr>
<td>
<img src="./images/hmm_binggung.png" height="70%"/><a class="pilih_size">Pilih Warna</a>
</td>
</tr>
<tr>
<td id="list_warna">
<span class="inactive" title="Out of Stock">Aqua</span>
<a class="list_size" title="Black">Black</a>
<a class="list_size" title="Blue">Blue</a>
<a class="list_size" title="Black">Green</a>
<a class="list_size" title="Blue">Brown</a>
</td>
</tr>
</table>

这是我的css代码：

a.pilih_size{
    font-family: Book Antiqua;
    font-weight: bold;
    font-size: 0.9em;
    margin-left: 5px;
}
a.list_size{
    font-family: Book Antiqua;
    font-weight: bold;
    font-size: 0.8em;
    padding: 2px 4px 2px 4px;
    border: 1px gray solid;
   -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    background-color:#a8e9ff;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff, endColorstr=#d7d7d7);
    background:-moz-linear-gradient(top, #ffffff 0%, #d7d7d7 100%);
    background:-webkit-linear-gradient(top, #ffffff 0%, #d7d7d7 100%);
    background:-ms-linear-gradient(top, #ffffff 0%, #d7d7d7 100%);
    background:linear-gradient(top, #ffffff 0%, #d7d7d7 100%);
    background:-o-linear-gradient(top, #ffffff 0%, #d7d7d7 100%);
    background:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#d7d7d7));
    margin-top: 50px;
}
a.list_size:hover{
    color: Gray;
    background-color:#ffffff;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d7d7d7, endColorstr=#ffffff);
    background:-moz-linear-gradient(top, #d7d7d7 0%, #ffffff 100%);
    background:-webkit-linear-gradient(top, #d7d7d7 0%, #ffffff 100%);
    background:-ms-linear-gradient(top, #d7d7d7 0%, #ffffff 100%);
    background:linear-gradient(top, #d7d7d7 0%, #ffffff 100%);
    background:-o-linear-gradient(top, #d7d7d7 0%, #ffffff 100%);
    background:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#d7d7d7), color-stop(100%,#ffffff));
    margin-top: 50px;
    cursor: pointer;
}
span.inactive{
    font-family: Book Antiqua;
    font-weight: bold;
    font-size: 0.8em;
    padding: 2px 4px 2px 4px;
    border: 1px gray solid;
   -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    background-color: #c0c0c0;
    color: white;
}
a.this_is{
    font-family: Book Antiqua;
    font-weight: bold;
    font-size: 0.8em;
    padding: 2px 4px 2px 4px;
    border: 1px gray solid;
   -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    background-color: #9adc38;
    color: #525c56;
}

这就是输出

我想在一排大小和颜色之间做一点距离 在搜索完所以谷歌后我发现答案是使用内联块

我添加此css

a,span{
    display: inline-block;
}

但输出与大的距离......我怎么能做距离

如果我们看到上面的图片

在大小kategory大小列表（第一行）和文本（pilih大小）之间没有任何距离，因为所有列表都使用<span>标记 并且在颜色分类中，颜色列表（第一行）和文本（pilih warna）之间的距离很大，因为只使用<span>标记中的一种​​颜色而使用<a>标记

我如何使距离行与大小之间的距离相同（见下图？

有人能帮帮我吗？感谢