垂直 HTML 按钮间距问题

Question

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

我不想做垃圾 vertical-align: -2px 或类似的事情。我想要的是对 为什么 间距不一致有一些了解。感谢阅读。

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

Answer 1

对table

使用border-spacing: 0;

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>

垂直 HTML 按钮间距问题

Vertical HTML button spacing issues

html

css

html-table

margin

padding