在td的两个按钮之间放置空格

Question

我有一个td

<td align="left">              
<button class="button_tabel"><div class="button_tabel_text_hero"> hero</div>   </button>  


<!-- todo Put a gap   here 48 px  -->           


<button class="button_tabel"><div class="button_tabel_text_zero"> zero </div>   </button>          

</td>

我如何在这两个按钮之间放置一个大约48像素的间隙呢?

我希望把空间分开的按钮，这样可以很容易地从骨干改变，而不影响其他组件

Answer 1

为其中一个按钮设置一些外边距:

<td align="left">              
<button class="button_tabel">
<div class="button_tabel_text_hero"> hero</div>
</button>  
<button class="button_tabel">
<div class="button_tabel_text_zero"> zero </div>
</button>          
</td>

.button_tabel:first-of-type {
margin-bottom: 48px;
}

Answer 2

在.button_tabel上添加margin-left:48px

.button_tabel + .button_tabel{
margin-left:48px;
}

Answer 3

选择第一个类，并添加一个边距:

.button_tabel:first-child{
margin-right:48px;
}

<td align="left">              
<button class="button_tabel"><div class="button_tabel_text_hero"> hero</div>   </button>  


<!-- todo Put a gap   here 48 px  -->           


<button class="button_tabel"><div class="button_tabel_text_zero"> zero </div>   </button>          

</td>