垂直 HTML 按钮间距问题

【问题标题】：Vertical HTML button spacing issues垂直 HTML 按钮间距问题
【发布时间】：2015-09-13 16:56:41
【问题描述】：

我有三个垂直排列的<input type="submit" /> 元素。前两个在相同的<div> 和<table> 中，但底部的在不同的<div> 和<table> 中。我无法更改这一点，因为它是在更大页面的上下文中用于 UX 目的，这只是一个 sn-p。我的第三个按钮是额外的几个像素太低，以至于这三个按钮之间的间距不一致。

我不想做一个垃圾vertical-align: -2px 或类似的东西。我想要了解为什么间距不一致。感谢阅读。

这是一个 JSFiddle 示例： https://jsfiddle.net/y57wLtjb/

【问题讨论】：

标签： html css html-table margin padding

【解决方案1】：

将border-spacing: 0; 用于table

table {						
	border-collapse: collapse;
	border-spacing: 0;
}

<div id="pre-update-section">
    <table>
        <tr>
            <td><input style="width:100%" type="submit" value="Check for duplicates" data-bind="click: CheckForDuplicates" id="btnCheckDups" /></td>
            <td><label id="ajaxStatusMsg"></label></td>
        </tr>
        <tr>
            <td><input style="width:100%" type="submit" value="Load Catalog Parts" data-bind="click: LoadCatalogParts" id="btnLoadCatalogParts" disabled="disabled" /></td>
            <td></td>
        </tr>
    </table>
</div>
    
<div id="start-update-section">
    <table >
        <tr>
            <td><input style="width:100%" type="submit" value="Run Catalog Update" data-bind="click: RunCatalogUpdate" id="btnRunCatalogUpdate" disabled="disabled" /></td>
            <td>
            </td>
        </tr>
    </table>
</div>

【讨论】：

谢谢！这正是我想要的。